CSS for the wrapper

  • Caroline,

    I’m trying to control the content reflow relative to the size of the browser window.

    My thought was that this would be CSS for the wrapper containing the h1 and body tags. I was hoping to better understand how these divs are nested within each other.

    This wrapper information might be contained in <article class = “post-2 page type-page status-publish hentry” id = “post2”> but I can’t find that code.

    Could you help please? Thank you in advance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Caroline Moore

    (@sixhours)

    Not really sure what you’re trying to do, but you can use a program like Firebug or Chrome Developer Tools to Inspect your code to pinpoint specific areas and check the applied CSS, search for specific code snippets, etc.

    Thread Starter LoudR

    (@loudr)

    Thanks for replying so promptly!

    There are two issues, both which are related to controling what happens when the size of the browser window changes. I’d like to make the wrappers a fixed size to avoid the content from reflowing.

    The first is an h1 and content held within this div:

    <article id=”post-2″ class=”post-2 page type-page status-publish hentry”>

    The second is the background image. It seems to move as the size of the browser window changes. I’d like it to be static anchored in one place.

    Is this explanation a little more clear?

    Thanks again.

    Please post a link to your site.

    Afzaal

    Thread Starter LoudR

    (@loudr)

    https://www.olsonbillerduo.com/practice

    Theme Author Caroline Moore

    (@sixhours)

    Sorry, I’m still not clear, but I think you’re referring to the responsive media queries for smaller screens. I don’t recommend removing them because it will break the site for mobile devices, but that will ensure the content does not reflow. They’re located toward the bottom of the stylesheet, within @media screen declarations.

    Here’s a tutorial on full-screen background images, if that’s what you’re trying to do:
    https://css-tricks.com/perfect-full-page-background-image/

    You can also set the background-position on the body element to static to see if that creates the effect you want. You can read more about background positioning:
    https://www.w3schools.com/cssref/pr_background-position.asp

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS for the wrapper’ is closed to new replies.