@media query does not work with Bootstrap properly

user_13087742 0
Viewed 372

I am using a media query with Bootstrap's jumbotron. I want to align vertically two divs inside jumbotron to be mobile responsive. The problem is that under a certain width, jumbotron flaps responsively as expected and my photo in the right stays there rather than aligning vertically with the first div.

To prevent this, I added media query to align the photo to the left of its parent div but I did not get a result.

The code and the pictures are attached. 

<div class="jumbotron">
  <div class="row">
    <div id="about2" class="col-md-6">
      <h1>About Me</h1>
      <p>This page contains a brief information about Mehmet Eyüpoğlu.
      </p>
      <a href="index.html">
        <i id="home-button" class="fas fa-home"></i>
      </a>
    </div>

    <div class="col-md-6">
      <img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
    </div>

  </div>
</div>

Css Code:

#about2 {
  font-size: 35px;
  margin-top: 50px;
}

#about-foto {
  max-width: 70%;
  border-radius: 10px;
  margin-left: 60%;
}

//The actual problem starts here: 

@media (max-width: 768px) {
  #about-foto {
    margin-left: 5%; 
  }
}

Image showing the desktop size

Image showing the mobile size

twitter-bootstrap media-queries css html
2 Answers

You just have a syntax error with your media query, try!

@media screen(max-width: 768px) {
  #about-foto {
    margin-left: 5%;
  }
}

You can find a torough explanation of media queries here.

user_51655300

Don't use margin to align stuff like this, especially not when using bootstrap.

Get familiar with the grid system of bootstrap, you can define a width for every breakpoint.

I changed your markup to use a col-md-8 for your text and col-md-4 for your image. Important thing is that the numbers always add up to 12 (because that's the number bootstrap uses for one line)

This means that for screens with medium (md) size and up you side will be divided by a column with md-8 width and md-4 width, for every screen smaller it will be -12 width (100%)

#about2 {
  font-size: 35px;
  margin-top: 50px;
}

#about-foto {
  max-width: 70%;
  border-radius: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron">
  <div class="row">
    <div id="about2" class="col-md-8 ">
      <h1>About Me</h1>
      <p>This page contains a brief information about Mehmet Eyüpoğlu.
      </p>
      <a href="index.html">
        <i id="home-button" class="fas fa-home"></i>
      </a>
    </div>

    <div class="col-md-4 text-left">
      <img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
    </div>

  </div>
</div>

user_47331610
Related