• I am using the theme “Computer3 1.0 by BBrowne”. My web site is https://www.chaddahlberg.com. I love the theme – however – I would like to increase the width as it seems a little too narrow when viewed. Can you advise what setting for this theme I need to change to get this width increased? Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • That’s likely an older theme as it’s meant for smaller screen resolutions.

    In your style.css, change the width to something wider, such as 960px, which will display well at the lowest standard monitor resolution many designers shoot for these days, which is 1024 X 768. Keep in mind that you may need to adjust other elements after you change the width, including graphics.

    .Sheet
    
    {
    	position:relative;
    	z-index:0;
    	margin:0 auto;
    	width: 800px;
    	min-width:33px;
    	min-height:33px;
    }

    Other related CSS you may also need to tweak includes:

    .PageBackgroundSimpleGradient, .PageBackgroundGradient, .PageBackgroundGlare
    
    {
    	min-width:800px;
    }
    
    .nav .r
    
    {
    	right: 0;
    	width: 782px;
    	clip: rect(auto, auto, auto, 782px);
    }
    Thread Starter chaddahlberg

    (@chaddahlberg)

    Thank you zoonini for taking the time to assist. I made the changes, as well as several others in the style.css – and as you can see from my web site – https://www.chaddahlberg.com – the width is increased – but several other formatting is wrong, such as:
    -Header not displaying full from left to right of screen width
    -Footer not displaying full from left to right of screen width
    -Widget and body section not taking the full screen width
    -In widget section, vertical line displaying in title of widget

    I’ve linked the style.css on my web site to see what I’ve done. All changes are marked with a comment of /* CHAD */. –> https://www.chaddahlberg.com/code

    I’m still learning CSS. Can you assist with what I am still not pointing correctly?

    An excellent tool I recommend installing is the free Web Developer’s Toolbar add-on for Firefox, also available for Chrome. When you use the Information > Display ID & Class Details feature, it’s very helpful in figuring out which page element you’re dealing with, so you can then find the corresponding CSS for editing.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Increase Width of Theme’ is closed to new replies.