How to Make Scribble Acceptably Responsive

[paulag01]

I realized after investing time in customizing Scribble theme that it is not responsive, sigh. I am not looking to build out a perfectly built mobile-only site, but simply want it to behave acceptably on mobile devices.

Can someone offer some suggestions as the easiest way to get started and do this?

I recently built a site for someone on the Genesis Sample Child and was able to get that to behave acceptably, but I have no idea what I did there that I could apply here.

Thank you!

http://newsite.igniteleaders.com/

[gcampton]

You can take the stylesheet from sample and apply the top few categories to your stylesheet, such as normalizing, col layouts. etc, the twitter bootstrap parts.

/* # Table of Contents
- HTML5 Reset
	- Baseline Normalize
	- Box Sizing
	- Float Clearing
- Defaults
	- Typographical Elements
	- Headings
	- Objects
	- Gallery
	- Forms
	- Tables
- Structure and Layout
	- Site Containers
	- Column Widths and Positions
	- Column Classes

Try that see if it helps, also search studiopress for "responsive Header" and "responsive navbar" there's 100's of posts on that.

[paulag01]

This was a great start,

I am running into a few problems. I have it displaying acceptably on tablet landscape & portrait, but smartphones are still a hot mess.

I have 3 main problems:
1) Some sections are truncating on the home page (vertically)
2) Despite specifying a smaller header image (300px wide) and changing the width for small screens, it is still truncating.
3) I have tried 3 or 4 different mobile menu solutions (Amethyst Code and others) but none are working so far. The closest is WP Responsive Menu Plugin, but that will only address my primary nav (what can I do with header nav right?)

CSS for the smartphone sizes is below:

Any ideas? I am making progress, but now up against launch deadlines and not sure where to turn.

/* Smartphones (landscape & portrait) ----------- */

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

#header {
background: url('/images/mobile-header.jpg') no-repeat;
}

.#header.wrap {
max-width:300px;
}

#header .widget-area {
float:none;
margin: auto;
width: 100%;
}

#header .widget-area {
float: left;
max-width: 400px;
margin-left: 10%;
}

#nav .wrap {
max-width:320px;
}

#content {

max-width:320px;
}
#content .entry-title, #content .entry-content {
padding-left:10px;
padding-right:10px;
}

#aftercarousel .wrap {
max-width:320px;

}

#welcome .wrap,
#services .wrap,
#about .wrap,
#clienttest .wrap
{
max-width:320px;

}

.content-sidebar #content-sidebar-wrap,
.full-width-content #content-sidebar-wrap,
.sidebar-content #content-sidebar-wrap {
max-width:320px;
}

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

#footer-widgets .wrap {
max-width:320px;
}

.footer-widgets-1 {
float: none;
width: 100%;
}
.footer-widgets-2 {
float: none;
width: 100%;
}
.footer-widgets-3 {
float: none;
width: 100%;
}
.footer-widgets-4 {
float: none;
width: 100%;
}

#footer .wrap {
max-width:320px;
}

}

[Author]

Posts