#media query does not work with Bootstrap properly - html

Question

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

Answer 1

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.

Answer 2

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>