Step 1. Column widths/position based on window size

Language Help HTML
1

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://s3.amazonaws.com/codecademy-content/projects/bolt-network/index.html#
https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_bolt-network?link_content_target=interstitial_project

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
In the finished example website, when the window width gets smaller than 768px, specific content changes. The problem is with columns “Log in” and “Sign Up”. When the window gets smaller than the said size, the buttons go from being on the right side, and also being small, to being centered and taking up most of the screen width. How can i adjust bootstraps column widths and position based on window size? I have been trying and trying.

I’ve tried using
“@media screen and (max-width: 768px)”

And changing a couple of properties, but nothing seems to work. Float doesn’t override the “pull-right” class. The closest i’ve gotten was simply changing the padding and it works, but only for one certain window size, i can’t make it automatically change based on window size.

How do i get the result on the example web page?

Any help is appreciated. I’ve been at this for quite a long time and finally gave in to ask for help.

``` HTML

<!doctype html>

<div class="jumbotron">
  <div class="container">
    <div class="header">
      <div class="row">
        <div class="col-md-2">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg" />
        </div>
        <div class="pull-right">
          <ul>
            <li>Log in</li>
            <a href="#"><li class="button">Sign up</li></a>
          </ul>
        </div>
      </div>
    </div>

    <div class="main">
      <h1>Watch your favorite movies, instantly.</h1>    
      <a href="#" class="button">Learn More</a>
      <form class="form-inline" role="form">
        <div class="form-group">
          <input type="search" class="form-control" id="search" placeholder="Browse the collection">
        </div>
        <button type="submit" class="button">Search</button>
      </form>
    </div>
  </div>
</div>

<div class="supporting">
  <div class="container">
    <h2>A world of movies at your fingertips.</h2>
    <h5>Choose from the latest titles, with new movies added every day.</h5>
  </div>
</div>

<div class="feature">
  <div class="container">
    
  </div>
</div>

<div class="footer">
  <div class="container">
    
  </div>
</div>

CSS

html, body {
font-family: “Oxygen”, sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
}

.container {
max-width: 970px;
}

.supporting {
background-image: url(s3.amazonaws.com/codecademy-content/projects/bolt-network/[email protected]);
background-size: 141px 142px;
}

.jumbotron ul li {
display: inline-block;
padding: 8px 20px;
color: #FFFFFF;
}

.jumbotron ul {
margin-bottom: 80px;
}

.jumbotron img {
width: 170px;
}

.jumbotron .button {
color: #0393FF;
border: 1px solid #0393FF;
}

.jumbotron .button:hover {
background-color: #0393FF;
color: white;
}

.jumbotron {
background-color: #000000;
}

.main .button {
padding: 8px 20px;
text-decoration: none;
}

.main {
text-align: center;
color: #FFFFFF;
}

.main h1 {
margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
.jumbotron h1 {
font-size: 63px;
font-weight: 300;
}

#search {
width: 400px;
margin-right: 10px;
}
}

.main button {
background-color: black;
}

.main form {
margin-top: 80px;
}

.main .form-group input {
background-color: black;
border: none;
border-radius: 0;
border-bottom: 1px solid white;
}

.main .form-group input:focus {
box-shadow: none;
border-bottom: 1px solid #0393FF;
}

.main .form-group input:hover {
border-bottom: 1px solid #0393FF;
}

.supporting {
text-align: center;
background-color: #181818;
margin-top: -30px;
}

.supporting h2 {
color: #0393FF;
margin-top: 90px;
font-size: 30px;
}

.supporting h5 {
font-size: 16px;
}

<do not remove the three backticks above>
2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.