Converting To Responsive Layout

Community Forums Forums Design Tips and Tricks Converting To Responsive Layout

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  anitac 1 year ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #31874

    rctechs
    Participant
    Post count: 17

    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.

    http://goo.gl/8qlMj

    Sean

    #32276

    anitac
    Participant
    Post count: 6991

    It 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:

    [php]
    // 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">’;
    }[/php]

    Then, I took the responsive code from the Sample Genesis theme and added it to the Style.css:

    [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%;
    }

    }[/css]

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #32278

    rctechs
    Participant
    Post count: 17

    Ya 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

    #32498

    rctechs
    Participant
    Post count: 17

    Okay 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

    #47955

    cazwilson
    Participant
    Post count: 1

    The functions.php update you mentioned, anitac, has saved me. I thought I was going crazy as my media queries weren’t working.

    Thank you!

    #47995

    anitac
    Participant
    Post count: 6991

    Glad 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!


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

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

You must be logged in to reply to this topic.