WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Content area slips under when window is resized (7 posts)

  1. TMNR
    Member
    Posted 1 year ago #

    Hi,

    Could you kindly assist in identifying why the content slips down when the browser window is being resized? I've been trying to figure it out myself for days now...

    http://octopus.freetekno.lt/~tmnr/mudu/

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Try using a browser developer tool for this kind of exploratory CSS work.
    I use Google Chrome's built-in Developer Tool and found the culprit CSS [screenshot].

    Now that you know the style, from being exposed by the Developer Tool, you can add a new style to override it.

  3. TMNR
    Member
    Posted 1 year ago #

    I am using Firebug for Firefox. I'm posting here because I've done the research and still don't know what is causing this issue. It must be something I'm missing or something I don't know.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Look at the bottom right of the screenshot's browser section, I highlighted the style.

  5. TMNR
    Member
    Posted 1 year ago #

    Andrew,
    thanks for clarifying, but I still can't wrap my head around this.
    I know the culprit is #content, it moves and must have a rule to prevent it from doing so. I can't find one to modify, maybe I have to add something, like clear: none; or something like that? Nothing seems to work. I'm new to css, so my knowledge is only basic.

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Normally there's a minus margin top value on your content, which pushes your content upwards in the page;

    .singular #content, .left-sidebar.singular #content {
    	margin-top: -180px;
    }

    The new style when the browser resizes removes the minus margin by setting it to zero.

  7. TMNR
    Member
    Posted 1 year ago #

    I just found by dumb luck that using

    #main #content {
        margin-top: -180px;
    }

    instead of

    .singular #content, .left-sidebar.singular #content {
    	margin-top: -180px;
    }

    kinda solves the problem.
    So far so good, thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic