Welcome! To use this support forum, please Login or Join Today!

   

Help with media query

{name}
Rank

Total Posts: 16

Joined 2016-05-20

PM

 

Hi again, Casey,

I hate to ask for help with something as simple as this, but I am stumped.

On my computer, when I set the browser width to anything between 1001px and 1150px, the whole main menu wraps around, with text sizes and padding remaining as at full size.  See attachment.

To fix this, I have added this media query to a copy of layout.css in the child theme:

@media only screen and (min-width: 1001px) and (max-width: 1150px) {
    #menu ul li a {font-size: .95empx;padding-right:.5em;padding-left:1.25em;}
}

I must not be using the right selector. I have tried every way I could think of, including #wrap #menu li a, but it doesn’t affect anything.

What am I doing wrong?

Thanks in advance.

Website URL: http://77.104.139.216/~beesacro/

Attachments:

https://www.filepicker.io/api/file/1GGxbZ9Ql2VnkDKhNJMI

{name}
Rank

Total Posts: 16

Joined 2016-05-20

PM

 

Hi again,

I never figured out why the media-query was not working, but I managed to solve the issue through a work-around.  I set the font-size to 22px instead of 24.

If you do get a minute to look at this and can help with the media-query, that would still be helpful.

Thanks,
Ben

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Unless you have a full understanding of the implications of each, I’d avoid edge case media queries and just stick with some sane defaults otherwise it can get very confusing.

In this case, I think your problem is the rule itself;  “font-size: .95empx;” is not a valid property.

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

{name}
Rank

Total Posts: 16

Joined 2016-05-20

PM

 

Thanks - empx was a typo ...