CODEWITHSUNDEEP
csswordpresswordpress-theming
user1822824
user1822824

Reputation: 2488

Twenty Ten Child Theme - Modify Theme Width (940px to 1000px)

I originally posted this on WordPress Answers but was told it was a CSS issue and should be posted here.

I installed the latest version of WordPress (3.5) and the Twenty Ten theme (1.5) on my web server. I did not modify any settings, everything is the default. All I want my child theme to do is change the theme width from 940px to 1000px. The only file in my child theme is style.css and the only values I changed were the width.

The width adjustments work fine on all desktop browsers but on the iPhone (iOS 6) and iPad (iOS 6) the theme loads with a horizontal scroll bar and it's not possible to zoom all the way out. The horizontal scroll bar problem only effects the home page and not the sample page. The problem is limited to vertical mode only.

Below are screenshots and my style.css code:

My website where I installed the default WordPress with the code below is: www.w242.com

enter image description here

enter image description here

enter image description here

enter image description here

style.css:

/*
Theme Name: w242
Description: Child theme for the twentyten theme 
Author: w242
Template: twentyten
*/

@import url("../twentyten/style.css");

#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
    margin: 0 auto;
    width: 1000px; /* CHANGED 940px ---TO---> 1000px */
}

#access {
    background: #000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 1000px; /* CHANGED 940px ---TO---> 1000px */
}

Upvotes: 4

Views: 1966

Answers (1)

Plummer
Plummer

Reputation: 6688

First, at style.css line 173, you have an attribute assigned to div.#wrapper of padding: 0px 20px; which is going to extend the total width of the object to 1040px. Since you changed the width of the #wrapper child elements to 1000px, the padding style attribute adds another 20px to each side of the inside of itself, extending its size to 1040px. That's why you're getting the overhang.

Second, these screenshots are from a mobile device. Are you needing help with formatting for mobile or desktop? If mobile, the easiest way is to find a mobile theme plugin and modify it as a child theme instead of messing with a 2010 template. Also, you might want to look into getting away from using pixels as a unit and switch to % or em, or setting up min-width and max-width instead of just width.

Here's an article with some examples. http://www.cssjuice.com/css-liquid-layout-design/

hint to change the size of that header image, you're going to need to take a look at the 'functions.php' file.

Upvotes: 2

Related Questions