Home Forums Art WordPress Theme Tablet Portrait View not responcive

This topic contains 11 replies, has 2 voices, and was last updated by  BWSM 1 week, 6 days ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #18433

    Vax
    Participant

    Viewed on Desktop and mobile my site look ok. When I view on a tablet in portrait view the site is not responsive. The images don’t scale and the menu doesn’t change to hamburger which pushes the site title down the page. Is there a fix?
    http://www.angelikavaxevanidou.com

    #18442

    BWSM
    Keymaster

    HI,

    Please paste the custom CS code to “Appearance > Customize: Additional CSS”

    @media (max-width: 768px) {
    .responsive-ux .head-meta, .responsive-ux.navi-show-h.navi-show-h-left .head-meta, .responsive-ux.navi-show-h.navi-show-h-center .head-meta, .responsive-ux .header-bar-social 
    {display: none; }
    .responsive-ux .navi-trigger 
    {display: block; }
    .module.col-11, .module.col-10, .module.col-9, .module.col-8, .module.col-7, .module.col-6, .module.col-5, .module.col-4, .module.col-3, .module.col-2, .module.col-1 
    {width: 100%;}
    .module 
    { float: none; }
    .module.col-offset-1, .module.col-offset-2, .module.col-offset-3, .module.col-offset-4, .module.col-offset-5, .module.col-offset-6, .module.col-offset-7, .module.col-offset-8, .module.col-offset-9, .module.col-offset-10, .module.col-offset-11 
    {margin-left: 0;}
    }

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #18446

    Vax
    Participant

    I’ve added the css but the problem is still there.

    #18450

    BWSM
    Keymaster

    What’s device name you tested?
    Please upgrade the custom css as:

    @media (max-width: 768px) {
    .responsive-ux .head-meta, .responsive-ux.navi-show-h.navi-show-h-left .head-meta, .responsive-ux.navi-show-h.navi-show-h-center .head-meta, .responsive-ux .header-bar-social 
    {display: none; }
    .responsive-ux .navi-trigger,.navi-show:not(.ux-mobile) .navi-trigger 
    {display: inline-block!important }
    .module.col-11, .module.col-10, .module.col-9, .module.col-8, .module.col-7, .module.col-6, .module.col-5, .module.col-4, .module.col-3, .module.col-2, .module.col-1 
    {width: 100%;}
    .module 
    { float: none; }
    .module.col-offset-1, .module.col-offset-2, .module.col-offset-3, .module.col-offset-4, .module.col-offset-5, .module.col-offset-6, .module.col-offset-7, .module.col-offset-8, .module.col-offset-9, .module.col-offset-10, .module.col-offset-11 
    {margin-left: 0;}
    }
    #18451

    Vax
    Participant

    lenovo A10. Also when I scale with desktop it happens. At a certain screen size the logo and the menu clash and the logo drops down. Then if I scale down more the menu finally changes to hamburger and the page displays ok. It seems like there is an issue switching from full screen to responsive?

    #18453

    BWSM
    Keymaster

    Please upgrade the custom css as:

    @media (max-width: 830px) {
    .responsive-ux .head-meta, .responsive-ux.navi-show-h.navi-show-h-left .head-meta, .responsive-ux.navi-show-h.navi-show-h-center .head-meta, .responsive-ux .header-bar-social 
    {display: none; }
    .responsive-ux .navi-trigger,.navi-show:not(.ux-mobile) .navi-trigger 
    {display: inline-block!important }
    .module.col-11, .module.col-10, .module.col-9, .module.col-8, .module.col-7, .module.col-6, .module.col-5, .module.col-4, .module.col-3, .module.col-2, .module.col-1 
    {width: 100%;}
    .module 
    { float: none; }
    .module.col-offset-1, .module.col-offset-2, .module.col-offset-3, .module.col-offset-4, .module.col-offset-5, .module.col-offset-6, .module.col-offset-7, .module.col-offset-8, .module.col-offset-9, .module.col-offset-10, .module.col-offset-11 
    {margin-left: 0;}
    }
    #18454

    Vax
    Participant

    Now it displays better but the hamburger is too high. I can only see 2 of the lines instead of three.

    #18472

    BWSM
    Keymaster

    Please paste a screenshot. Thanks.

    #18474

    Vax
    Participant

    I took this on the descktop. The div container wrap is 772
    https://screenshots.firefox.com/of9Y5Gwx7aBhNy6O/angelikavaxevanidou.com

    #18480

    BWSM
    Keymaster

    Please add the custom CSS:

    body.responsive-ux #header-main>.container-fluid { 
        height: 100px;
    }
    #18482

    Vax
    Participant

    The Desktop and tablet views look ok but now the hamburger is to low in mobile view. Here’s a screenshot
    https://screenshots.firefox.com/TXbYe2AwbeTJhsXf/angelikavaxevanidou.com

    #18493

    BWSM
    Keymaster

    Please add the custom CSS:

    @media (max-width: 767px) {
    body.responsive-ux #header-main>.container-fluid { 
        height: 80px!important; }
    }
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!