Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 14, 2014 at 6:32 am #237402
    mattmorse

    I am trying to get my website, http://www.matt-morse.com, to display properly on all mobile devices. I understand this is a responsive theme, but the site seems to be rather stacked. The load times are also very slow. Is there a way to optimize this easily? Please advise on the following requests:

    Homepage (www.matt-morse.com): Can I prevent the partner logo element from displaying on any small screen?
    Footer on All Pages: Is there a way to change the footer on mobile devices to display differently than on computer?
    Mobile Menu: When I slide out the menu on mobile device, the list displays correctly but scrolls the entire length of the page. Is there a way to prevent scrolling further than the menu being displayed?

    Thanks for all of your help. FYI, I am using a child theme for all of this. If you have any further suggestions for optimizing this site for mobile devices after viewing, please send me anything you have.

    The support for this theme is off the charts and I will be sure to share your work with as many WordPress users as I can.

    March 14, 2014 at 9:36 pm #237832
    Devin

    Hi mattmorse!

    Like most responsive grids the theme resizes content to be full width when on mobile devices. So columns turn into 100% width and the page looks as you have it now.

    You can hide elements on different viewports using media queries and display: none on those element’s selectors. Its beyond what we can assist with in depth through support but the basics are in identifying the elements selector or adding your own and then making a new rule in your Quick CSS or child themes style.css.

    For example:

    
#av_section_5 {
display: none;
}

    If you put that into a media query then it will hide the section and its contents (the one that holds your partner logos). In the themes custom.css we have some sample media queries for you to use.

    Best regards,
    Devin

    March 15, 2014 at 7:07 am #237960
    mattmorse

    Is there a way to make the header and menu icon fixed on mobile devices, like it is on computers?

    March 15, 2014 at 7:11 am #237961
    mattmorse

    Also, the mobile menu background scrolls all the way down to the bottom of the page. Is there a way to make it just the height of the menu ?

    March 17, 2014 at 5:29 pm #238847
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 767px) {
.responsive #top #header {
position: fixed;
}
.responsive #main {
padding-top: 82px !important;
}}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.