Showing Full View on Desktop Large Screen

You can apply CSS to desktop-only screen sizes through Media Queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Thanks Andrew – trying media queries but not having much luck yet…

I would like a theme to always use the whole screen (full left to right) – especially w/ bigger desktop screens..

– right now – Using twenty thirteen or fourteen theme (and child) I can’t seems to make the whole site use the whole screen…

Q: Is there a preexisting theme setting in twenty thirteen or fourteen theme the will set this without having to add media queries to the child theme?

Q: is there another theme that will do this automatically with adding extra code?

as example: I tried adding this quick test to the 2014 child…

@media only screen
and (min-width : 1824px) {

body {
width: 99%;
}

/* Styles */
}

—– but it didn’t fill out the large screen like I expected

maybe what is inside the body (like header etc.)) is keeping it back?

Let’s see your site

Hi Andrew,

right now just a new blank install with twenty fourteen theme

on the sample page I tried setting it to FULL WIDTH template – but still not filling up right side…

also top header does not go all the way to the right….

https://testpaternity.net/?page_id=2

Sorry I can’t load that page, I get a never-ending loading white page

Thanks much for helping

– maybe I was doing something at that time…
please try again

the top paragraph is gibberish with no Breaks so it should go all the way right I think….

https://testpaternity.net/?page_id=2

So you were saying this didn’t work:

@media only screen
and (min-width : 1824px) {

body {
width: 99%;
}

/* Styles */
}

But what screen size were you viewing the website on with this change?

Hi,
Correct – this did not work when I sent this to the child theme

I have a 15 inch laptop – with an attached 1920 X 1080 large monitor

When I opened and maximized the browser window on both the 15 inch monitor and the large 1920 X 1080 monitor – there was still whitespace on the right and did not expand accordingly

I’m sure I have something set incorrectly – I’m just a newbie and not sure what it is – any ideas?

Also as an example I loaded “iconic theme”

it says it has “full width template”

this seems to naturally center the site – and when I put it on the large monitor it appears the that whole body of the site is lets say about 1100px and then there is more white space on the LEFT AND RIGHT on the bigger screen….

What I was hoping for is that the basic body of the site would get LARGER then 1100px when it was a on a bigger screen…

Does that make sense?

Q: Is there a way that the basic body of the site would get LARGER then 1100px or so when it was a on a bigger screen…

When I opened and maximized the browser window on both the 15 inch monitor and the large 1920 X 1080 monitor – there was still whitespace on the right and did not expand accordingly

The body isn’t the thing that’s constraining your website, see: https://snag.gy/zef9x.jpg ?

So try:

@media only screen
and (min-width : 1824px) {

 .site {
  max-width: 100%;
 }

/* Styles */
}

https://developers.google.com/chrome-developer-tools/