Tablet Portrait View not responcive

[Vax]

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

[SeaTheme]

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.com – Twitter – Facebook

[Vax]

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

[SeaTheme]

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

[Vax]

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?

[SeaTheme]

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

[Vax]

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

[SeaTheme]

Please paste a screenshot. Thanks.

[Vax]

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

[SeaTheme]

Please add the custom CSS:

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

[Vax]

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

[SeaTheme]

Please add the custom CSS:

@media (max-width: 767px) {
body.responsive-ux #header-main>.container-fluid { 
    height: 80px!important; }
}

[Author]

Posts