[Solved] Content being cut off horizontally on the right

[KhaiM]

Hello! I’m new here, so this is my first post along with my first,(just a heads up).

Anyway, I’m having issues with my site I’m working on. You see, the content on my site is being cut off when the browsers’ width is minimized.

Here’s my site: http://www.khaistatus.com/

Here’s the CSS: http://www.khaistatus.com/wp-content/themes/KHAISTATUS-2014-NEW/style.css

By the way, this site was made in WordPress.

I’m sure this is probably a simple fix, but I’m not a wiz at CSS just yet.

[Gus]

You specify width:980px; for your wrapper div classed as “wrap”.
It is a fixed width and remains as such even for a reduced viewport and extends beyond on the right.
You center it to get left & right space on a wide screen.

Leave the width out completely to achieve flexibility and for an example, change:
margin:0 auto; to margin:0 10%; again for flexibility.

Make other adjustments as required from fixed to variable widths as described above.

[KhaiM]

If I do that, all of my content wont be contained in the 980px wrap. It would be full width and that’s not exactly what I’m trying to achieve. I want a fixed width, without having that white space on the right.

When I have the wrap div centered with 980px, you notice the white space where the background and the footer background are being cut off. Just re-size the browser to the smallest width you can, and scroll to the right; you’ll see the white. I want to avoid that cut and just have the background completely covering the page.

I hope you understand.

[Gus]

The background is cover(ed) to 100% of the width.
The content’s width is wider than that of the viewport and therefore you can scroll horizontally beyond that of the background. This is normal.

Check out what I wrote earlier re. flexibility, elasticity or fluidity.
Google for Liquid layout .
That kind of fluid layout will resolve your problem.

[KhaiM]

Ok, thanks for the help.

[Author]

Posts