@media queries not working

Support
#1

I am using @media only screen and (max-width: 767px) to adjust a few css properties.
I have inserted this css into the Customizer in Customizer > Additional CSS and its not having any effect on my mobile devices. Am I putting this in the wrong place?

#2

Hello There,

Thanks for writing in! Your @media code should work and it does not matter where you add it as long as the css is valid and correct. Could you please post your css code in your next reply?

Thanks.

#3

I have applied the class location-icon-home to 5 images, the class location-name-home to the h2 and an id landing-footer to the image in the footer (used only on this page).

CSS in global css looks like this:

@media only screen and (max-width: 767px){

img.location-icon-home{
	max-width:50%;
}
h2.location-name-home{
	font-size:2em;
}
#landing-footer{
	background-position:top;
}

}

The Page I am referencing is approvedassets.com

Thank you

#4

Hello There,

Your code did not work because you were targeting the wrong element. Please use this code instead:

@media only screen and (max-width: 767px){

  .x-img.location-icon-home{
	max-width:50%;
	margin-left: auto;
	margin-right: auto;
  }

  h2.location-name-home{
	font-size:2em;
  }

  #landing-footer{
	background-position: bottom center !important;
  }
}

We would loved to know if this has work for you. Thank you.

#5

Unfortunately this did not work…

#6

Hello There,

The code did not work because you have inserted invalid css codes.

Please remove this first:

<link href='https://fonts.googleapis.com/css?family=Courgette' rel="stylesheet" type='text/css'>

And the orphaned excess curly brace which can be found in the image below:

Please let us know how it goes.

#7

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