Community Forums › Forums › Archived Forums › General Discussion › Mobile Responsive Sites
Tagged: mobile responsive design
- This topic has 19 replies, 3 voices, and was last updated 10 years, 1 month ago by krystyn.
-
AuthorPosts
-
February 28, 2014 at 1:41 pm #92860jessicakstudioMember
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,
JessicaFebruary 28, 2014 at 1:47 pm #92861nutsandboltsMemberIf 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+February 28, 2014 at 2:11 pm #92866jessicakstudioMemberThanks Andrea!
That was exactly what I was looking for!
So as long as the theme is HTML5, it should be good on different devices?
February 28, 2014 at 3:05 pm #92868nutsandboltsMemberYes, 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+March 14, 2014 at 12:45 pm #94890krystynParticipantThis 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?
March 14, 2014 at 12:48 pm #94891nutsandboltsMemberCan 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+March 14, 2014 at 12:49 pm #94892krystynParticipantWhoops @nutsandbolts..I copied, but failed to paste! http://www.krizzydesigns-test.com/test1/
March 14, 2014 at 12:51 pm #94894nutsandboltsMemberI'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+March 14, 2014 at 12:56 pm #94898krystynParticipant@nutsandbolts, I removed the lines and it still looks the same. Hmmm...any other ideas?
March 14, 2014 at 12:59 pm #94900nutsandboltsMemberTry 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+March 14, 2014 at 1:01 pm #94901krystynParticipantWell, 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.
March 14, 2014 at 1:03 pm #94902nutsandboltsMemberOkay, 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+March 14, 2014 at 1:07 pm #94903krystynParticipantThat didn't work either. I also tried width:1150px, too just to see and that didn't work, either.
March 14, 2014 at 1:11 pm #94904nutsandboltsMemberOkay, 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+March 14, 2014 at 1:15 pm #94906krystynParticipantHmm...
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.
March 14, 2014 at 3:06 pm #94926krystynParticipantForgot to tag you @nutsandbolts
March 15, 2014 at 10:45 am #95028nutsandboltsMemberOkay, 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+March 15, 2014 at 11:05 am #95040krystynParticipantI 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; }
March 15, 2014 at 11:06 am #95041nutsandboltsMemberAwesome! 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+March 15, 2014 at 11:07 am #95042krystynParticipantThanks 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!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.