desktop / mobile version settings

[artsomething]

Hello,

I put sizes on all my content for desktop and mobile but I have some issues when I turn my phone. it looks like a mix between desktop and mobile version.

When I turn it, it would be good to maybe have the same layout as desktop at the size is much larger. Even if I change the size of the mobile text
But for example my menu tabs is pretty long so it not fits in and even if I define to have menu burger on mobile, I didn’t have it when I turn it..

I’m conscious it’s pretty tricky and precise but it’s pretty problematic in my case

how can I define the size of the desktop and of the version mobile because ?

please find an example on iPhone 13 mini

A.

[SeaTheme]

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS” to display menu burger on landscape mode:

@media (max-width: 920px) {
 .responsive-ux .navi-header,.responsive-ux header .hidden-mobile {
    display: none; }
.responsive-ux.show-menu-item-mobile .navi-trigger-out,.navi-show:not(.ux-mobile) .navi-trigger-out {
 display:block!important; } 
}
@media (min-width: 921px) {
  .responsive-ux.show-menu-item-mobile .navi-header, .responsive-ux .menu #navi_wrap ul:not(.sub-menu) {
    display: none; }
}

If you want to custom other element size for landscape mode, please list them. I will give you the custom CSS codes also.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[artsomething]

thank you

then I have 2 more questions

1. When I’m in a landscape mode the menu on the expansion panel is vertical, so everything is not accessible, is there a way to keep vertical in portrait mode and horizontal in landscape ?

2. is it possible to force to keep the original layout only on landscape mode in this page http://floracastillon.com/about/

thanks a lot for your help

[SeaTheme]

Welcome!
1. Please add the custom CSS:

@media (max-width: 920px) and  (orientation: landscape) {
 .menu-panel .menu {
    display: flex;
    justify-content: center;
    margin-top: 90px;
}
.menu-panel .menu:after,
.menu-panel .menu:before {
   display:none;
}
.menu-panel .navi li { 
    margin: 0 10px;
 }
}

2. What’s “the original layout” you talked about? Is the header layout of menu burger?

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[artsomething]

1. perfect thank you

2. no sorry I was talking about the global page to force it to be with the desktop layout and not this mix of mobile and desktop..

On your Art theme, for every page, we can choose to keep or not the original layout, it’s a really good option, maybe in a futur update you can add it. For now it’s only possible to choose this for a groupe in the bm content builder, if I’m not wrong 🙂

[SeaTheme]

Thank you, we will seriously consider your suggestion 🙂

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[artsomething]

My bad I just check and it’s the same on Art Theme, It’s just I don’t have the same content at all so my page are not build in the same way. Anyway…

Yes it would be great to have this because it works perfectly on devices like iPad in landscape but on small devices like the iPhone Mini the result is undesired at all and it’s hard to control this, it’s a bastard format.

So I wish there was a button or a css way to force a page to keep the desktop layout on landscape mode.

Beside this you will do a really great work on your themes with an amazing support

[Author]

Posts