WordPress.org

Forums

Spun
CSS for the wrapper (6 posts)

  1. LoudR
    Member
    Posted 2 years ago #

    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!

  2. Caroline Moore
    Member
    Theme Author

    Posted 2 years ago #

    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.

  3. LoudR
    Member
    Posted 2 years ago #

    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.

  4. afzaal1985
    Member
    Posted 2 years ago #

    Please post a link to your site.

    Afzaal

  5. LoudR
    Member
    Posted 1 year ago #

  6. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    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:
    http://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:
    http://www.w3schools.com/cssref/pr_background-position.asp

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic