- This topic has 2 replies, 2 voices, and was last updated 8 years, 8 months ago by
.
-
Posts
-
I've recently created a child theme based off of the Genesis Sample, which was responsive, but it no longer works properly on mobile devices. I really need to get this site working on mobile devices, but more importantly I need to understand what it takes to make a Genesis site function properly on mobile. I'm pretty decent with programming / logic, so I just need a bit of hand holding until I wrap my head around it. I know all of the information is in the "media queries" section", but that's about it - the dimensions / rules / all the rest elude me.
So a two part question:
1 - What specifically needs changing on this site to make it mobile responsive again? The navigation menu is messed up (not centered), the header widget is inside of the logo, and a few other minor things. Main specs:
Site Width - 1024
Body - Fixed height of 504
Sidebar Widget - Fixed height of 5042 - What can you tell me about how to make a site responsive? Any useful reading material? (I've searched a lot, haven't found anything too useful). Any specific rules I need to know?
I know a lot of these kinds of questions come through here, but I'm quite eager to learn. I'm more concerned with part 2, as if I can learn how this all works, fixing my site will be a breeze. In the mean time, I'll study the Genesis Sample theme and see what relationships I can form between the normal width, and the mobile widths. Thanks a lot for any feedback <3
http://foundingfathersbar.comThe media queries are pretty simple. You need:
/* # Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {//code in here
}
@media only screen and (max-width: 1024px) {//code in here
}
@media only screen and (max-width: 960px) {//code in here
}
@media only screen and (max-width: 800px) {//code in here
}
The best way is to start reducing the width of your browser until something looks wrong. Then make that a break point and write the new css to fix the problem. On your website i can see things go wrong as you get smaller than 1024px. So to start you off.. to fix your menu and widget area problem...
@media only screen and (max-width: 1024px) {.nav-primary {
width: auto;
}.site-header .widget-area {
text-align: center;
}}
I love helping creative entrepreneurs build epic things with WP & Genesis.
Many thanks for clearing things up I'll give it a go today and post my results later on.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.