[derekalvarez]

I did that and it worked. Thank you!

[derekalvarez]

I see. That makes sense...

Total width = 1000px

Content = 650px

Sidebar = 260px

Inner wrap padding = 50px

I'm missing 40px somewhere, but I'll mess with it and see how it goes.

[derekalvarez]

No, this mobile styling is new to me, so I appreciate it. So I suppose I'll have to figure out what width an iPad screen is and set the width to be 1 pixel lower than that?

[derekalvarez]

My lines don't correspond with yours because I've added code to my css. Here's what I have...

<code>/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 960px) {

body,
.news-landing #inner,
#inner {
width: 100%;
margin: 0 auto;
}

.content-sidebar #inner,
.sidebar-content #inner,
.content-sidebar-sidebar #inner,
.sidebar-sidebar-content #inner,
.sidebar-content-sidebar #inner {
background: #fff;
}

#header,
#inner,
#nav {
border: none;
}

.archive-page,
.content-sidebar #content,
.content-sidebar #content-sidebar-wrap,
.content-sidebar-sidebar #content,
.content-sidebar-sidebar #content-sidebar-wrap,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content.news-landing #content,
.full-width-content #content,
.full-width-content #content-sidebar-wrap,
.home-middle-left,
.home-middle-right,
.home.news.content-sidebar #content,
.news-landing .wrap,
.sidebar,
.sidebar-content #content,
.sidebar-content #content-sidebar-wrap,
.sidebar-sidebar-content #content-sidebar-wrap,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer,
#header,
#home-bottom,
#home-middle,
#home-top,
#sidebar-alt {
box-sizing: border-box;
width: 100%;
}

#footer .creds,
#footer .gototop,
#header ul.menu,
#header .widget-area,
#nav,
#subnav,
#title-area {
float: none;
text-align: center;
width: 100%;
}

#title-area {
padding: 10px 0 0;
}

#header .widget-area {
padding: 10px 0;
}

#header .searchform {
float: none;
padding: 0;
text-align: center;
}

#header ul.menu {
float: none;
}

#header li,
#nav li,
#subnav li {
display: inline-block;
float: none;
}

#header li li,
#nav li li,
#subnav li li {
text-align: left;
}

#nav li.right,
#subnav li.social-facebook,
#subnav li.social-rss,
#subnav li.social-twitter {
display: none;
}

.home.content-sidebar #home-bottom .featuredpost .post {
padding: 0 0 10px;
}

.entry-content img,
.featuredpage img,
.featuredpost img,
.post-image,
.ui-tabs img {
border: none;
padding: 0;
}

img.ad-left,
img.ad-right {
float: left;
margin: 5px 10px 5px 0;
}

#footer {
background: none;
padding: 15px 0 10px;
}

#footer p {
padding: 0 20px;
}

}

@media only screen and (max-width: 600px) {

#title {
font-size: 36px;
line-height: 1;
}

#nav li a,
#subnav li a {
font-size: 12px;
padding: 5px;
}

#home-top .ui-tabs ul.ui-tabs-nav {
display: none;
}

#content {
padding: 15px 20px;
}

h1,
h2,
h2 a,
h2 a:visited {
font-size: 24px;
}

h3,
h4 {
font-size: 18px;
}

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
padding: 0;
width: 100%;
}

}</code>

[derekalvarez]

Worked perfectly. Thank you!

[derekalvarez]

Hello?? Anybody there??

[derekalvarez]

Hi Greg, what about if I want to remove the blog posts and sidebar from the home page, and instead add a full-width widget? I used this tutorial to add a home page widget...

http://my.studiopress.com/tutorials/register-widget-area/

...but I'm struggling with what code I should add to the home.php file.

Website url is...

http://tucsoncarservice.net/

[Author]

Posts