Grow your CSS skills. Land your dream job.

CSS Gives Vertical White Line when the window is in Restore Down

  • # June 25, 2013 at 2:05 pm

    After quite a few searches, I found the WordPress theme I was looking for, but it seems it has a problem and its developer is not answering my emails.
    I had a look in the CSS but I couldn’t figure it out because I’m not good with CSS, I barely know a few basic things about it but not enough to solve this problem.

    Ok, so here’s the problem. The theme looks ok when the window (with all browsers, Firefox, Chrome, IE, etc) is on full screen, but if you click on the Restore Down button (TOP RIGHT CORNER), the button in the middle of Minimize and Close, a giant vertical white line appears on the right sidebar.

    # June 25, 2013 at 2:14 pm

    It’s sort of expected. This happens when the window is too small to display the entire width of the site (and a scrollbar appears at the bottom). The BODY and WRAPPER will then have the width of the window, so the background only shows for that width. Scrolling to the right shows then “outside” the site and that’s the white part.

    A workaround would be to give the wrapper a min-width of 1150px or so.

    # June 25, 2013 at 2:54 pm

    I’ve modified the .innerwrap width to 1150px as suggested by you and to 1200px but the issue is still not fixed. It looks the same.

    Is there another solution?

    Thanks!

    # June 25, 2013 at 3:02 pm

    I don’t need to download a theme and install it to see what the issue is. You’ll need to show us your site and the solution you applied, then we can figure out what the actual problem is that you’re having.

    Note that I wasn’t talking about the width of the .innerwrap; I said give the WRAPPER a MIN-WIDTH.

    # June 25, 2013 at 3:13 pm

    I don’t want to make the site public yet, it’s not yet launched. That’s why I was searching for a theme in the first place.
    Yes you were right, I looked for Wrapper in CSS and found it, it was set at 100% and I changed it at 1150px but after I did that, the background stops at 1150px instead of fully stretching from left to right… so it looks even more awful that way…
    The reason I’m trying to fix this issue is because I want the site to be perfectly viewable for cell phones also but on cell phones it looks exactly as it looks on computer with a small window (vertical white line)… that’s why I want to fix it.

    I would be very grateful if you could help me. If you can’t help me, I will just probably start looking for another theme…

    # June 25, 2013 at 3:15 pm

    No, don’t change width from 100% to 1150px. Add MIN-width of 1150px to the wrapper.

    This theme is not responsive though. Not good for mobile.

    # June 25, 2013 at 3:29 pm

    I’ve added a min-width in the Wrapper and the issue still remains :(
    Here’s how the Wrapper looks:

    #wrapper {
    padding: 0px;
    height: auto;
    width: 100%;
    min-width: 1150px
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }

    Do you mean by “not responsive”, that its not one of those themes that rearrange themselves according to resolution and all? Throughout my search I did found some of those responsive themes but I can’t say I’m really a fan of those type of themes…

    Here’s an example: http://jinsonathemes.com/fabs/?themedemo=Vasiliki

    It’s cute and all but not really my type of theme. Is there a fix for this theme?

    # June 25, 2013 at 3:32 pm

    Ohhh wait! I got it… I didn’t used this sign after 1150px -> ;

    LOL

    That did it! Its fixed now! Thanks man! May you live 1000 years! :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".