responsive on tablet and mobile

  • Hello,

    I have my site, https://www.mugeturner.com

    I want it to look good on tablets and then mobile phones. I posted a similar post last year for my old site and used the following code:

    @media (max-width: 979px) {
    #nav-main {width: auto;height: auto;float:none;}
    #nav-main ul.sf-menu {display: block;}
    #nav-main select.navselect {display: none;}
    #nav-main .mobilenav-button {display:none;}
    }
    @media (max-width: 767px) {
    #nav-main {width: 100%;height: 50px;margin: 20px auto 0px;float: none;position: relative;}
    #nav-main ul.sf-menu {display: none;}
    #nav-main select.navselect {display: block;}
    #nav-main .mobilenav-button {display:inline-block;}
    }

    But I have tried it on the new site and deosnt quite work. Does anyone have any suggestions on how to make it look good on different sized mobile devices?

    Muge

Viewing 3 replies - 1 through 3 (of 3 total)
  • hannah

    (@hannahritner)

    Hey, virtue is a fully responsive theme so it should look good without adding any css. Did you view it in mobile before adding css?

    Thread Starter mugeturner

    (@mugeturner)

    No I have added a lot of css over the last few weeks. The main issue is that it doesnt quite fit on to the landscape screen on my ipad. ANd then in portrai?t mode the sidebar jumps to the bottom of the page, which obviously looks terrible. Also the new var bar with the dropdown option deosnt drop down.

    Looking at your site, you’ve completely hacked all the responsive css. It’s really hard to recommend tweaks when you’ve changed how the framework works..
    For example you have a set container size of 1200px.

    So it seems you don’t want the site to be responsive? For example all sidebars should drop below the content in a mobile environment on a responsive site. So can you explain what your after? Because my first step one would be to remove a lot of your custom css and rewrite it using media queries.

    Kadence Themes

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘responsive on tablet and mobile’ is closed to new replies.