How do I make my page scale to fit different screen resolutions and widths?

  • I’m very new to the world of WordPress, but I thought I was having tremendous luck figuring things out.

    We were just getting ready to go live with our site, when a few of the reviewers said that everything in our right sidebars (there are two) is now showing on the left of the screen at the bottom. I think this has to do with the ratio of their screens and the width of the pages, because with some tweaking of their settings, they were able to view it properly.

    My question is, how do I set things on my end so that the page shows properly on every screen? I don’t really know much about coding, so great detail is appreciated.

    Thank you!
    Here’s the site: https://www.pghntma.com

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is the behaviour of a fluid layout and is practical. Why would you want to change this?

    Thread Starter mollypwest

    (@mollypwest)

    We’d like the site to look the same to everyone who visits it– so, for example, we can say, “Check our link to Facebook on the right-hand side of the page.”

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look for Media Queries in your stylesheets and remove these.

    The theme you are using, Yoko, is designed to do that. It is a responsive, fluid design theme. The things moving around depending on the browser size is not an accident. To alter the behavior of the theme requires understanding CSS.

    Unfortunately this is not a one line fix. You will need a front end developer to get the behavior you want.

    The bigger question that needs to be asked is if this theme is appropriate for you if you want it to be the same across different size screens.

    This theme is intended for display on multiple devices, Laptop, Iphone, Ipad, Android, Desktop, etc. Changing the theme to a static one will lower the experience on mobile devices.

    Thread Starter mollypwest

    (@mollypwest)

    Thank you. I’m very new to designing and to WordPress… I’ve been doing a little more searching about media queries, but I’m still not sure how to do this. Can you give me a little more detail or point me toward a good post or site that can help?
    Thank you.

    Here is a link to a good reference source and article https://www.alistapart.com/articles/responsive-web-design/ on the subject.

    In your specific theme the CSS containing the media queries is in the bottom third of the stylesheet. I would warn against making any changes, especially if you don’t fully understand what will happen, and the visual quality on mobile devices will degrade.

    Thread Starter mollypwest

    (@mollypwest)

    That’s a very good explaination, and the article provides good insight. Thank you. I think I’m going to take the site back to the reviewers and outline the points that you’ve made and see where they want to go from here.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do I make my page scale to fit different screen resolutions and widths?’ is closed to new replies.