CSS Media Query Shows in X-Theme view but not on live website

Support
#1

@media screen and (max-width: 767px) and (min-width: 481px) {
$el {
padding-left: 12em;
padding-right: 12em;
}

$el .x-column {
margin-bottom:35px
}
}

@media screen and (max-width: 480px) {
$el {
padding-left: 6em;
padding-right: 6em;
}

$el .x-column {
margin-bottom:35px
}
}

#2

Hi There,

Thank you for writing in, in what element did you put that custom CSS? If it is in the column, please update this selector $el .x-column to this $el.x-column

Base on my experience most of the time this issue is happening because of a CSS syntax error somewhere on any of the CSS areas (Theme Option CSS, Page CSS, Element CSS, etc.), please audit all your CSS area and resolve any found errors, you can use this tool here.

You seemed to be opening a comment markup (/* */), but never close.

(https://prnt.sc/kujgag)
(https://prnt.sc/kujgjg)

Hope it helps,
Cheers!

#4

Hello, its is in the row element, I tried your other suggestions and it didn’t work. It seems that nothing in my media query is affecting the row.

#5

Hi There,

Please try adding the !important to your custom CSS:

@media screen and (max-width: 767px) and (min-width: 481px) {
	$el {
		padding-left: 12em !important;
		padding-right: 12em !important;
	}

	$el .x-column {
		margin-bottom: 35px  !important;
	}
}

Hope it helps :slight_smile:

#6

Hmm no luck with that solution

#7

It seems that it blocks the media queries only after the X Themes default mobile layout kicks in

#8

I even tried using an id on the row and targeting it in the global css

#9

Hi There,

Did you audit all your custom CSS like suggested above? And I notice that you have 2 Rows on that section, one for mobile view and one for desktop view. Make sure you’re applying your custom CSS to the mobile view Row.

If nothing works, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#10

Hi @itsthehype,

Something is wrong with your installation. I added this to global CSS and it works

@media screen and (min-width: 480px) and (max-width: 768px) {
 .primal-benefits-mobile  {
    
    padding-left: 12em;
    padding-right: 12em;
    background-color: blue;
  
  }
  
  .primal-benefits-mobile .x-column {
    margin-bottom:35px
  }
}

@media screen and (max-width: 480px) {
.primal-benefits-mobile {
  
    padding-left: 6em;
    padding-right: 6em;
  
  }
  
.primal-benefits-mobile .x-column {
    margin-bottom:35px
  }
}

The issue could be due to internal caching of your host as I can’t reproduce this on any of my installations with the same versions.

Thanks!

#11

Ok thank you, do you think I should ask the host about internal caching, or reinstall the theme , or both? Will reinstalling the theme erase my css and settings?

#12

Hello @itsthehype,

Thanks for updating the thread.

I would first suggest you to get in touch with hosting company and ask about internal caching system. Then if cache is not resolving the problem, you can try to reinstall the Theme. Reinstalling theme won’t remove the CSS and settings.

Thanks.

#13

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