Support » Fixing WordPress » Showing Full View on Desktop Large Screen

  • Hi all,

    Using twenty thirteen or fourteen theme (and child) – does anyone know where the setting is to let the responsive screen use the whole screen left to right on large monitors (and still respond correctly to tablets and phones)?

Viewing 14 replies - 1 through 14 (of 14 total)
  • Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can apply CSS to desktop-only screen sizes through Media Queries: http://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?

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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….

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

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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….

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

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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…

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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: http://snag.gy/zef9x.jpg ?

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So try:

    @media only screen
    and (min-width : 1824px) {
    
     .site {
      max-width: 100%;
     }
    
    /* Styles */
    }

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Showing Full View on Desktop Large Screen’ is closed to new replies.