Agency Pro on mobile

Community Forums Forums Design Tips and Tricks Agency Pro on mobile

This topic is: resolved

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  Steve@BHQ 7 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #100998

    Steve@BHQ
    Participant
    Post count: 101

    I’ve seen a few different mobile responsive themes on mobile, and yes some change pretty radically to accommodate the screen size difference, nav, location of featured content etc.
    But I just noticed on the Agency Pro theme I’m using, the navigation is off the screen and the text in the middle of the page doesn’t scale down in size. But the demo doesn’t display this way. IT looks correct.

    http://chrisfranksfishing.com/
    #101291

    nutsandbolts
    Keymaster
    Post count: 3187

    Your nav has a set width in your stylesheet:

    .site-header .genesis-nav-menu {
    float: right;
    width: 900px;
    }

    If you change it to max-width, the menu should resize for mobile.

    Which text isn’t resizing? The title is wrapping to another line because the word “professional” is too long to fit at that font size. If you give .home-top .widget-title a smaller font size in your media queries, that will prevent it from wrapping to the next line.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #101292

    Steve@BHQ
    Participant
    Post count: 101

    Thank you, did that. Yes, the nav now resizes for mobile, but non mobile it’s wrapping

    #101300

    nutsandbolts
    Keymaster
    Post count: 3187

    That’s because the header right widget area has a width of 800px (which should also be a max width). Increasing it to 900px looks like it makes it drop down because 900px plus the 300px title area is wider than the 1140px container. However, the title text is only like 217px so you could decrease the title area width and it should fit.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #101875

    Steve@BHQ
    Participant
    Post count: 101

    Ok, did that, tried both “max-width” & 900px, with the same result. Had to also make the .title-area smaller.
    Looks like it worked. Thank You!
    Steve

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

The topic ‘Agency Pro on mobile’ is closed to new replies.