Adjusting width of page for 1024 x 768 screen resolution

  • Author
    Posts
  • #127715

    ragingred
    Member

    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.

    #127908

    atthe404
    Member

    You need the CSS upgrade. Then adjust.

    #127909

    ragingred
    Member

    As I said above, I have the CSS upgrade (that’s why I’m posting this in the CSS Customization forum).

    #127911

    atthe404
    Member

    Well just identify the outer container then adjust in the CSS.

    #128242

    jev2000
    Member

    I think the question is “what do you change and how do you do it?”

    #128252

    photology
    Member

    I have the same question. What is the process one has to go through to find, edit and then save the width change?

    #128253

    cornell
    Member

    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.

    #128255

    atthe404
    Member

    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.

    #128257

    ragingred
    Member

    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.

    #128260

    atthe404
    Member

    Would you like to mark as resolved?

    #128261

    ragingred
    Member

    Oh, yeah. Done!

    #128270

    photology
    Member

    Thanks for the help guys!

The topic ‘Adjusting width of page for 1024 x 768 screen resolution’ is closed to new replies.