- This topic has 3 replies, 2 voices, and was last updated 12 years, 1 month ago by
.
-
Posts
-
I've created a new custom theme, based off of the Genesis Sample theme, and somewhere along the lines have lost a solid mobile responsive experience, I've made very few edits overall, so pinpointing what I did wrong, and how to fix it shouldn't be too hard, I'm just not a css expert.
The main exits I did:
-Adjusted core width to 1000px.
-Altered spacing between entry area and sidebar area.
-Altered spacing between the navigation and header
-Got rid of backgrounds of various sections to show main background
-Made the navigation bar a set width of 1000px, rather than the default Genesis Sample full width bar.
-Made the footer a set width of 1000px, rather than the default Genesis Sample full width bar.
-Added an image to the footer, and centered everything.
-Set a background image for the navigation bar.There may be a few more edits in there, but that's the gist of what I did. When I view the site on my Nexus 7 and Kindle Fire HD, the Logo seems to be fine, the social icons (header widget right) seem to be alright, but the menu and footer are messed up (not centered, and image or text is off position).
I'd be happy to share my entire CSS file if anyone needs that to help, otherwise, inspect away and a huge thanks for the help! Any other tips / comments pertaining to the site would also be welcomed, as this is my first attempt at creating a child theme using Genesis.
http://foundingfathersbar.com/It looks like you changed the standard widths to 1000px, but you didn't change those same widths for smaller screen sizes. Scroll down to the bottom of your stylesheet and check out the media queries (starting with @media). You need to adjust the widths for the core, nav bar and footer in the media queries as well.
Ah, that explains it, there's separate css for the mobile devices - I'm new to "rem" units vs "px", so I figured that rem was what controlled the mobile responsive portion of the site.
That being said, what values will work to keep it mobile responsive? I see where to edit now, but can I simply throw in 1000px for a mobile device?
You added a width of 1000px to .nav-primary and .site-footer. You'll need to add those elements to the media queries, assigning widths for various screen sizes. How many screen sizes you adjust for is up to you.
Another option would be to replace your existing width:1000px with max-width:1000px. You'll still need to adjust the background images in the media queries for smaller sizes though. Or you may want to eliminate the background images and just use a border for smaller screen sizes.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.