there's unnecessary blank space in page

  • remehtemehmedia · Member ·

    hello, my page doesn’t look right. There’s this annoying blankspace in the right. And it’s, unfortunately, scrollable. I dont know what the CSS script I put on that makes it that way. Previously, it looked okay.

    Here’s the screenshot.
    http://snag.gy/Wz4tL.jpg
    The blankspace is identified with orange lines. And in the bottom the scroll is in the middle. So it should have displayed symmetrically (left and right margin), right?

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • gracejiyoung · Member ·

    Hi there,

    Please note that is designed into the theme. The content width is 1000 px wide , with the content size set at 940px wide as seen in the theme’s support guide:

    https://wordpress.com/themes/oxygen/

    However, it looks like your display size is around 1600px wide. So any larger than 1000px, will have that blank space.

    Cheers!

  • remehtemehmedia · Member ·

    Yes, how do I repair this? I’d be glad if you show me the wrong CSS script in my panel and give the correct script.

    Thank you

  • gracejiyoung · Member ·

    Hi there,

    This wouldn’t be something we can repair as it was designed this way. If you would like to make the entire background color white, please add this to your CSS:

    body {
	background-color: white;
}

    Cheers!

  • remehtemehmedia · Member ·

    Hello, sorry I think I didn’t tell the problem quite clear. The blank space is not only showing in my PC, which you’re right to tell it’s 1600px, but also in the smartphone.

    So I guess the wrong thing here is the CSS script that I have inserted before. But the problem is I don’t know which script are causing the problem. Would you help me to find out for me? Because a week ago there’s no problem with the display. It shows perfectly fine both in PC and smartphone.

    Thank you.

  • gracejiyoung · Member ·

    I’m a bit confused. Can you please explain? Try adding the CSS I provided you and see if that solves your issue.

  • thesacredpath · Member ·

    Hi, the reason for the horizontal scroll bar is that the #text-10 widget, which has been moved with position: absolute; is inheriting the widget width of 100%. Since it is now outside of its parent div, it is extending way off to the right of your site. Add a width: 200px; declaration to the #text-10 rule in your CSS so it looks like this. 

    #text-10 {
    bottom: 100px;
    left: 220px;
    position: absolute;
    width: 200px;
}
  • remehtemehmedia · Member ·

    Thank you so much sacredpath, you’re my saviour. :)
    And thanks to you to grace for giving your attention.

  • remehtemehmedia · Member ·

    too bad it’s not working. :((( I’m desperate and confused.

  • thesacredpath · Member ·

    I’m not seeing the horizontal scroll bar on your site with the above code. If I disable the width declaration, then the problem comes back. Are you still seeing this issue? If so, try clearing your browser cache, and also, which browser (and version) are you seeing the issue on?

    I’ve checked Firefox, Chrome and Safari and all is good from my Mac.

  • thesacredpath · Member ·

    Ok, the above is part of it, but it too a while to figure out the other culprit. Find the following rule in your CSS and change it to match what I have below. 

    .site-title {
    width: 95%;
    max-width: 940px;
}

    I found this using an iOS simulator in Xcode on my Mac. Hopefully it takes care of the issue. What it was, is that the width in the above was set to a fixed value of 1000px. I’ve changed that to 95% and set a max width equal to the width of your overall container area.

  • remehtemehmedia · Member ·

    Finally, it’s all turn back into normal now. The script is what I needed. Again, thank you so much sacredpath!

  • thatrobyn · Member ·

    Thank you for checking in, and letting us know! Much appreciated :)

  • The topic ‘there's unnecessary blank space in page’ is closed to new replies.