Community Forums › Forums › Archived Forums › Design Tips and Tricks › Converting To Responsive Layout
- This topic has 5 replies, 3 voices, and was last updated 10 years, 9 months ago by Anita.
-
AuthorPosts
-
March 28, 2013 at 8:44 pm #31874rctechsMember
I have a few quarks in my design and I am new to CSS so just learning as I go (used to have a designer working with us but gone now). The following site I used the Nomadic Theme for it about 1 1/2 years ago when creating it and it worked great. Now client wanted to update for responsive design and keep same layout. I got most updated (except for Margins and Padding) but my navigation is off to the left now. Could that be do to my padding and margins are still px and not % or do I have a typo in my CSS.
Padding and Margins are throwing my off since you have to use the element container size and trying to find the container size is more difficult than I thought. I have not added the media queries yet.
Any ideas on the navigation? Also if you have tips on getting element container size that would help.
Sean
March 31, 2013 at 10:47 am #32276AnitaKeymasterIt seems you are actually editing the desktop version and not mobile. I am working with this very thing - teaching myself and this is what I did to get myself started. I would take out what you have there so far and start with this.
First, you need to add this to your Functions.php file - you need the Viewport so it will recognize the mobile devices:
// Add Viewport meta tag for mobile browsers add_action( 'genesis_meta', 'custom_viewport_meta_tag' ); function custom_viewport_meta_tag() { echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">'; }
Then, I took the responsive code from the Sample Genesis theme and added it to the Style.css:
/* 14 Media Queries ---------------------------------------------------------------------------------------------------- */ /* Desktops, laptops and iPads (landscape) ----------- */ @media only screen and (max-width: 1024px) { #wrap { max-width: 960px; } } /* iPads (portrait) ----------- */ @media only screen and (max-width: 768px) { #wrap { padding: 0 5%; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .wrap, #footer .creds, #footer .gototop, #header .widget-area, #inner, #title-area, #wrap .sidebar, #wrap #content, #wrap #content-sidebar-wrap, #wrap #sidebar-alt { width: 100%; } .genesis-nav-menu li, #footer .creds, #footer .gototop, #header ul.genesis-nav-menu, #header .search-form { float: none; } .genesis-nav-menu, #description, #footer .creds, #footer .gototop, #header .search-form, #title, #title-area { text-align: center; } .genesis-nav-menu a { padding: 20px 16px; padding: 1.25rem 1rem; } #title { margin: 16px 0; margin: 1rem 0; } #header .search-form { margin: 32px auto 0; margin: 2rem auto 0; width: 50%; } .genesis-nav-menu li.right { display: none; } #footer .wrap { padding: 24px 0; padding: 1.5rem 0; } .footer-widgets-1, #header .genesis-nav-menu { margin: 0; } } /* iPhones (portrait and landscape) ----------- */ @media only screen and (max-width: 480px) { html { font-size: 87.5%; /* 14px base */ } #header .search-form { width: 100%; } .archive-page, .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 { margin: 0; width: 100%; } }
From there... I am making edits and changing/adding/editing to get it to work.
Again, I've been teaching myself and this seems to be working for me. I am using a different theme though and I don't have any content to work with.
Love coffee, chocolate and my Bella!
March 31, 2013 at 10:52 am #32278rctechsMemberYa I started looking at it again over the last few days and I got much further along. At the time of posting I did not have any media queries I was just working on getting the desktop version to be flexible and look the same using %. Much better now then I was last week. I will take a look at the code you gave and it might help me quicker with my media queries.
Thanks
Sean
April 1, 2013 at 1:30 pm #32498rctechsMemberOkay I got a lot done over the last few days but wanted to reach out to the community for assistance in a couple of things I can't seem to figure out.
I still have some tweaking to do as far as sidebars removing under the iPhone view but I can't seem to figure out why my site has a slight scroll bar on the iPhone view. I must still have a set fixed width or something but can't figure it out.
Any assistance would be great.
Thanks
Sean
June 26, 2013 at 9:19 pm #47955cazwilsonMemberThe functions.php update you mentioned, anitac, has saved me. I thought I was going crazy as my media queries weren't working.
Thank you!
June 27, 2013 at 6:01 am #47995AnitaKeymasterGlad it worked for you @cazwilson. Make sure you copy your code and SAVE IT!!! All that work shouldn't go to waste when you can save it for another project!
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.