- This topic is empty.
-
AuthorPosts
-
January 29, 2014 at 6:43 pm #161361KhaiMParticipant
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.
January 29, 2014 at 7:52 pm #161364GusParticipantYou 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.
January 29, 2014 at 8:34 pm #161371KhaiMParticipantIf 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.
January 29, 2014 at 11:09 pm #161379GusParticipantThe 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.January 29, 2014 at 11:26 pm #161382KhaiMParticipantOk, thanks for the help.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.