Media Query Breakpoint Adjustment

[wh]

Hi Guys - I'm using the Monochrome Pro theme and I want my site to display the full page when viewed on an iPad in portrait / vertical mode.

I believe the breakpoint is 782px with this code @media only screen and (max-width: 782px) in the style.css

What is the best way to change this so an iPad viewing at 768px can see the entire site in full width?

If I edit the style.css, won't this be changed with an update? If I add new css code into the additional css theme customization area, won't this just be in addition to the current media query because the query is different?

For example

The existing code it this:

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

If I add

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

to the CSS in theme customization, it won't override because it's just different.

Please help.

[ᴅᴀᴠɪᴅ]

You just change it where you see it the style.css, so just delete '782px' and replace with '767px'.

There are no updates for StudioPress child themes, only the parent theme Genesis is updated, so don't worry - you won't lose the customization.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[wh]

Ok excellent.

I'll change this and do more testing.

[wh]

OK, I changed the value in the style.css file but now I can't get the new version of the style sheet to load in any browsers. Thus, the old value is still present. I even refreshed the browser clearing all cache etc...

[Author]

Posts