Width of Container — How do I make this work?
I have been using the Graphene theme for awhile now and I love it. The problem – which I just discovered IS a problem – are the personal computers I use at home and at work I have the settings on them that kind of zoomed in, which makes it easier for me to read. I’ve had it that way for years and want to keep it this way. So, while the browser itself is at 100%, the overall settings are bigger.
That being said — I thought my website looked perfect on my computer – I had the Width of Container set at 1150 and so the borders on the side were about an inch or so, which was perfect. Everything looked fine, including the banner.
Then…. I went to another computer at my office and was shocked when I went to my site and the borders were almost triple in size, making my actual content fit about half the page. (if you put the borders together, they would take up half the page).
So, just testing on that computer I made the Width of Container at 1390 and that looked nice and there was an inch of border (which is what I wanted). But it stretched the header photo. Then on my personal computer, with the settings being zoomed in, this looked like a mess and the site was huge and I needed to use a side scroll.
My overall question is this… How do I make it so only a inch or so of border shows up for anyone visiting my site? I like the border, but I need my content to be more visible. Like I said, when I go in and just change the Width of Container to a bigger number, it stretches out my banner and doesn’t look good on my personal computers. It’s easy for me to make a new banner if I need to, but at this point I wouldn’t even know what size. :/
Any help would be greatly appreciated.
I checked my home computer settings and its 1900X1200. That’s the recommend setting and I really like it. (I forgot to check what my office computer settings are.)
How do I figure out the best setting when all computers are different?
If anyone has any suggestions, I would greatly appreciate it. I am sooooo confused.
THIS is a Snapshot of my Home Computer.. As you can see the content is wide with a nice border. It’s perfect:
And THIS … with the same settings is what I see when I use a computer at my office (other than my personal one). It’s way too much border and you can see even some of the content is squished.
PS. I have read previous posts, and know the #container in CSS can be changed. But can it be done so that the container is normal size for all computers? I checked my mom’s computer and her settings are 1360×768 so even with my site at 1305px container width, I was scrolling side to side on her computer.
- You must be logged in to reply to this topic.