Docs

[Laurie H]

Hey there themeco…
I have searched through the forum for ages, but I cannot find an answer specific to the problem i am having with media queries on mobile. In my child theme style.css I have the following in order to set up media queries for various screen sizes (mainly for mobile) here are a couple of queries:

/*Medium – Tablet (Landscape): 768px – 979px*/
@media only screen and (min-width: 768px) and (max-width: 979px) {
.cs-custom-box-headline { font-size: 70%; }
.cs-box-bodyText { font-size: 80%; line-height: 1.2; }
.box-set-height { height: 280px; }
}

/*Small – Tablet (Portrait): 481px – 767px*/
@media only screen and (min-width: 481px) and (max-width: 767px) {
.box-set-height { height: 200px !important; }
}

And this is in my css on line 138
.box-set-height {height: 300px;}

I added a class called .box-set-height into columns in Cornerstone. This fixes a set column background height.
This query works fine on… /*Medium – Tablet (Landscape): 768px – 979px*/

But I cannot get queries for mobile to work… /*Small – Tablet (Portrait): 481px – 767px*/
I have tried all sorts of combinations, like:
@media (min-width: 481px) and (max-width: 767px)
@media screen and …
Basically, media queries for mobiles get ignored. I’ve not had a problem like this before with media queries. Do you have any suggestions please?
Any advice will be very much appreciated! 🙂

[Rupok]

Hi there,

Thanks for writing in! So you are using the media query 481px – 767px for mobile device, right? Actually there is no mobile device with 481px CSS width or 481ppi. You need to use more lower width like :

@media (min-width: 320px) and (max-width: 767px) {
 // CSS for mobile devices
}

You will find all possible mobile screen size here – http://mydevice.io/devices/

Let’s follow the CSS width that’s used on media query.

Hope this helps.

Cheers!

[Laurie H]

Hi there,

Thanks for replying! Actually I didn’t post all my media queries before. I now have the following set for mobile:

@media (max-width: 767px) {
.box-set-height { height: 280px; }
}

/*Extra Small – Phone: 480px & Smaller*/
@media (max-width: 480px) {
.box-set-height { height: 280px; }
}

So, after many ways of trying these, the only way i can get them to work correctly on mobile (portrait) is to set just one query at a time, so any combination of @media (min-width: 320px) and (max-width: 767px) Does Not work.

Setting @media (max-width: 480px) Does work.

The size breaks are irrelevant to whether the queries work or not.
This is rather strange. Do you know why this may be happening?

Lovely theme to work with mostly 🙂

[Rupok]

Hi there,

Thanks for updating. So it seems too many media query overriding the expected result. You are declaring the CSS correctly but also try to find out the conflicting CSS by Inspecting the element style and see which one is overriding the style.

You could provide your URL and point us one specific issue so that we could check and other will be similar I guess.

Hope this makes sense.

Cheers!

[Laurie H]

Hi Rupok

Many thanks for the advice. I see now that I have a bunch of media queries that I have made for ESgrid, and these are higher up in my CSS than the general site media queries. The higher up ones must be over riding the lower down ones. is that correct?
Thanks for the great support 🙂

[Jade]

Hi Laurie,

The codes in the lower part are given the higher priority so they override the CSS above them in most cases.

You may read more about it here: http://www.hongkiat.com/blog/css-priority-level/

Hope this helps.

[Laurie H]

Hi Jade,

Oh I see, its the other way around. Thank you for the link 🙂

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts