Adjusting width of page for 1024 x 768 screen resolution
-
I’m trying to figure out how to change the width of my blog to fit a screen resolution of 1024 x 768. It’s currently set for an 800 x 600 screen. I know there are still people who use 800 x 600, but since most use 1024 x 768 or more, I’d like my blog to be set for that resolution. I don’t like the extra space on the sides.
I use the k2 theme with custom CSS.
-
-
As I said above, I have the CSS upgrade (that’s why I’m posting this in the CSS Customization forum).
-
-
-
I have the same question. What is the process one has to go through to find, edit and then save the width change?
-
The container you need to change in k2 is called #page. There is a width setting of 780px. modify that to something like 990px. Don’t take it right out to 1024, it won’t fit on a 1024 screen.
Photology – what theme are you using? Link to your blog please. :)
If you’re running Firefox, get a plugin called Web Developer and install it. It will then give you the option to view the CSS for a particular element of the page. You can then adjust it in the custom CSS as necessary.
-
There are 3 ways that the width can be defined. As fixed width, as percentage based or as em based.
In fixed width the width of the blog is expressed in px.
In percentage the width is expressed as a percentage of the parent container (for the blog the outer container is the whole view port or window).
In ems the whole blog flexes as a multiple of the font size.The vast majority of sites used fixed width. That gives rise to the question: What is a good width.? It is largely amatter of choice. Generally I pay no attention to screen sizes. I do not know if folk with big monitors have their browser at full size. How can I? What I do not want are lines of text that are overlong. They soon get unreadable. Conveniently IE does not support the CSS for max-width. A dilemma. Do we use javascript. ? (not possible here). Or are we willing to use ugly hacks?
As to changing the width, we need to consult the html (View Source) and find the outer container – commonly #rap or #page. Then we need to identify the inner areas, commonly #content and #sidebar or similar. Obviously altering one width means you need to adjust the others.
It can be a handy trick to add a border to each so you can see what you are doing during the development.
Remember that even com users can use a mockup of their blog to edit locally. No need for XAMPP etc. Just View Source for the blog, select all, copy into notepad and save as blog.htm. Copy the CSS in the same way. Adjust link to CSS. When you are done paste CSS back into your CS editor at com
HTH.
-
Thanks people! I’ve been playing around with the width of the page and of the main content & sidebar. It turns out that I don’t really like how the blog looks when I make it compatible with a 1024 x 768 screen. Like atthe404 said, the lines of text were too long. Also, I had to change the size of my header too, of course, and it didn’t look as good at the larger size. Probably blogs with three columns look okay at larger widths, but I just have two.
Anyway, I finally managed to find a background pattern that I really like (it looks nice and it’s easy on the eyes), so the space on the sides doesn’t bother me so much.
Thanks again for the help. I’m a novice at CSS, but I’m learning.
-
-
-
- The topic ‘Adjusting width of page for 1024 x 768 screen resolution’ is closed to new replies.
WordPress.com Forums 