Fix Site – Mobile Responsive

Community Forums Forums Design Tips and Tricks Fix Site – Mobile Responsive

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  Porter 3 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #114133

    Porter
    Member
    Post count: 218

    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 504

    2 – 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


    I gladly accept beer donations – payment@gemfruit.com

    http://foundingfathersbar.com
    #114178

    David Browne
    Participant
    Post count: 167

    The 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;
    }

    }


    We are Dave & Erin. Full time travellers and designers. Currently in Sydney. Follow us on Google +. I’m new to twitter so be the first to say hey Twitter

    Note: Known to give only give negative critique on design. I don’t mean to offend anybody, it is just more efficient pointing out mistakes than saying “yes, its beautiful” every time. :)

    #114235

    Porter
    Member
    Post count: 218

    Many thanks for clearing things up I’ll give it a go today and post my results later on.


    I gladly accept beer donations – payment@gemfruit.com

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.