@media-queries not working with screen size CSS

Question

I've been trying everything I can to fix my problem by searching on the web but I couldn't find anything related to mine. I been learning CSS for the past two months so my level is not so high. I'm trying to use the functionality of CSS3 : @media.

I have a page "events" on the website. There is an image on the left where I use a float to wrap my text around it. I want to use @media for adding a padding-bottom : 20px when the size of the screen is higher than 1400px. Otherwise the text below goes behind the image.

I tried to put the less amount of code possible. This is the html code :

<div id="contenu_a">

<ul><img src="img/participate/ev/test.jpg" width="420" height="" style="margin: 20px;" ></ul>

<div>
<h1> Events </h1>   

<p> Mensarum enim voragines et varias voluptatum inlecebras, ne longiu progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.</p>     

</div>
</div>

<div id="contenu_b">                    
<div>

<h1> '.$donnees['title'].'</h1>

<p>'.$donnees['presentation'].'</p>

<button class="button" > More... </button>

</div>
</div> 

This is the css code :

/* Contenu_a */

#contenu_a h1
{
border-bottom: 1px solid black;
padding-bottom: 7px;
padding-top: 17px;
padding-left: 20px; 
font-size: 24px;
font-family: Futura, Arial, serif;
font-weight: normal;
margin-bottom: 20px;
}

#contenu_a div
{   
padding:1px 0;
color:black;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
}

#contenu_a ul
{
padding-bottom:5px;
float: left;
}

#contenu_a p
{
padding-left: 20px;
padding-right: 20px;
padding-bottom:10px;
text-align: justify;
}

/* Contenu_b */

#contenu_b h1
{
border-bottom: 1px solid black;
margin-bottom:7px;
padding-bottom: 7px;
padding-top: 17px;
padding-left: 20px; 
font-size: 24px;
font-family: Futura, Arial, serif;
font-weight: normal;
}


#contenu_b div
{
padding:1px 0;
color:black;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
-webkit-box-shadow: rgba(3, 2, 2, 1) 0 0px 50px -1px;
box-shadow: rgba(3, 2, 2, 1) 0 0px 50px -1px;
border-radius: 10px;
-webkit-border-radius: 10px;
}

@media screen and (min-width: 1400px) {
  #contenu_a ul
{
    padding-bottom:20px;
}

Answer 1

You don't sincerely need the screen attribute at the front of your query setting. And you are using the min-width attribute which calculates the width of your viewport. In your question you are asking for a way to calculate the height of the viewport which I have an answer on right here:

@media (min-height: 1400px)
{
   #content_a ul {
      padding-bottom: 20px;
   }
}

You can also use the and rule to set up some maximum / minimum values to your media queries. In this case if you would like the padding to occur when your screen height is between 800 and 1400 pixels, you would go for @media (min-height: 800px) and (max-height: 1400px) .

Answer 2

I'm so sorry I couldn't awnser quickly, thanks for your help, I found a solution. Inserting a padding bottom on the image was the error because it is in position type float so it wasn't changing anything. But applying it on the text above worked fine.

@media (min-width: 1300px) and (max-width: 1450px) {
  #contenu_a p
{
    padding-bottom:35px;


}
}

@media (min-width: 1450px) and (max-width: 1700px) {
  #contenu_a p
{
    padding-bottom:85px;


}
}

Thankyou !