Mobile Responsive Sites

[jessicakstudio]

Hi,

Can anyone point me in the direction of tutorials on the topic of mobile responsive sites for Genesis?

My site is mobile responsive, but I am wanting it to look the same across all devices.

For example:
http://www.chrissishields.com/

It looks the exact same in the computer browser, as it does on the iPad & iPhone.

Thanks for any help,
Jessica

[nutsandbolts]

If you want to remove mobile responsiveness, there are generally 3 things to remove/change:

(1) Remove the following from functions.php (assuming your child theme is HTML5):

//* Add Viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

(2) Remove the entire media queries section from the end of your stylesheet.

(3) Search for any "max-width" rules in your stylesheet and change them all to just "width."

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[jessicakstudio]

Thanks Andrea!

That was exactly what I was looking for!

So as long as the theme is HTML5, it should be good on different devices?

[nutsandbolts]

Yes, that's correct. If it's an older child theme, let me know (though the general steps are the same).

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

This is just what I was looking for. Thanks @nutsandbolts. Quick question...I can't figure out why my footer background width doesn't appear to fill the screen (at least on an iphone). Any suggestions? The width seems to come from the inner, so it should also be 1150px, but it's not?

[nutsandbolts]

Can you post a link to your site? It's always easier to help if we can see what you see.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

Whoops @nutsandbolts..I copied, but failed to paste! http://www.krizzydesigns-test.com/test1/

[nutsandbolts]

I'm seeing this in your stylesheet:

.site-inner, .wrap {
margin: 0 auto;
/* max-width: 1150px; */
width: 1150px;
/* max-width: 1140px; */
}

Instead of commenting out those lines, remove them completely. Commenting out doesn't always work.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

@nutsandbolts, I removed the lines and it still looks the same. Hmmm...any other ideas?

[nutsandbolts]

Try changing it to width: 100%; and see if that fixes it. If it doesn't, leave it there for a second and I'll look at it again.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

Well, that sort of fixes the footer issue, but takes the inner to full-width and drops the sidebar down and the footers are all mis-aligned.

[nutsandbolts]

Okay, change that back and try adding this:

.site-footer .wrap {
        width: 100%;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

That didn't work either. I also tried width:1150px, too just to see and that didn't work, either.

[nutsandbolts]

Okay, I think I found it. Put a width of 1150px on .footer-widgets and that should get it working.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

Hmm...

Okay, we are getting closer.

I actually had to add

margin: 0 auto; (so that it was centered)
width:1150px;

to .footer-widgets

but, before this, the footer was full-width on non-mobile and of course, now this makes it only 1150px.

[krystyn]

Forgot to tag you @nutsandbolts

[nutsandbolts]

Okay, try this...

On .footer-widgets where you have the width of 1150px, change that rule to this:

width: 100% !important;

Then change the width on .site-footer to 100% as well.

It's hard to tell whether that will work on mobile but it seems to fix the widths in the browser at least.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

I figured it out. I had to add a .wrap.

This seems to work:

.footer-widgets {
	background-color: #f5f5f5;
	clear: both;
}

.footer-widgets .wrap {
background-color: #f5f5f5;
	clear: both;
	padding: 20px 0 10px;
	padding: 2rem 0 1rem;
width:1150px;
margin: 0 auto;
}

[nutsandbolts]

Awesome! Glad you got it resolved. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[krystyn]

Thanks for your help. I also had to use the same idea on before-header and site-footer just in case anybody else is looking.

Onto problems 3-6...or something like that!

[Author]

Posts