[paulag01]

Glad you got it sorted out.

There was a short time during version upgrades that Simple Edits was wonky for me also.

[paulag01]

You will likely need to use some media queries to accomplish this and have the rows appear differently depending on device.

You can get an intro to media queries here:
http://www.developer.com/lang/css/introduction-to-css3-media-queries.html

and then
more on that here

http://www.studiopress.com/design/website-respond-mobile-devices.htm

It is a bigger topic that I have continued to dig deeper into myself. I recently did the mobile class on Code School that was very helpful to get my foundational thinking straight.

Hope that helps a bit.

[paulag01]

Thank you so much Tom!

Mentally I was thinking how do I make the home page and blog page (given they are all latest posts) "different". This solution worked like a charm.

Thanks for simplifying!

[paulag01]

In the Simple Edits plugin you could add [post_date] to either the before or after post meta section. Did you try that?

[paulag01]

Thanks Brad... What you shared definitely helped.

I was doing something but had to be missing a step somewhere. Thanks for the clear walkthrough.

[paulag01]

Before the media queries means -- at the bottom of your CSS file you will see a section that starts

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

Put the code before there.

[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;
}

}

[paulag01]

Just the little green arrow that is like a "bullet"?

If that is the case, in the following css

#sidebar li, #sidebar-alt li {
background: url("images/sidebar-list.png") no-repeat scroll left top rgba(0, 0, 0, 0);
border-bottom: 1px solid #dddddd;
margin: 0 0 3px;
padding: 0 0 3px 10px;
word-wrap: break-word;
}

Remove the: background: url("images/sidebar-list.png") no-repeat scroll left top rgba(0, 0, 0, 0);

The green arrow goes away.

Hope that helps.

[paulag01]

I am going to update this to resolved as the solution here:

Remove #header on home page only

worked in the CSS.

Why the code in functions.php did not do the trick, I don't know, but I have what I need. Thanks.

[paulag01]

I am not familiar with the Education theme, but having done this on other themes, I would suggest something like this in functions.php

add_theme_support( 'genesis-footer-widgets', 4 );

There is likely something in there now that reads the same but with a "5".

Hope that gives you a start.

[paulag01]

Actually to get the footer on home page too, all I had to do was comment out

/*remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );*/

Because I just wanted the footer I have on all the other pages to also display on home.

[paulag01]

Thank you Robin! I really appreciate that!

I am using Firebug but for whatever reason, I couldn't discern the .content-area difference when I was looking. Sometimes you just can't "see" things when you stare too long 😉

[paulag01]

That did it!

Thank you!

[paulag01]

That definitely gets it to drop down on the smartphones...but it truncates the left 50% of the header right widget content.

Thoughts on which setting that might be to get it to display the content fully?

Do I need a float in there or something?

Thanks again for your help!

[Author]

Posts