Hello,
We have stumbled on a problem with the website scaling for mobile landscape mode. It especially affects the header content forcing the menu to stack and making the header change in size. It also makes the front page off centered with the hero slide and title. At some resolutions it even affects the entire website width making the entire right side of the site a white bar that hides hamburger menu or shopping cart icon so that you have to scroll horizontally to be able to see them. Ill attach some screen shots from inspecting the website in mobile mode to clarify what i mean.
We have tried using some custom css in our live version as a temporary sulution to make it slightly better which is:
@media (min-width: 750px) and (max-width: 1024px) and (orientation: landscape) {
.site-header {
padding: 0 !important;
}
.site-header__element–top {
padding: 0px 0 !important;
min-height: auto !important;
}
.page-width {
padding: 0 0px !important;
}
.site-header__logo,
.site-header__logo img,
.site-header__logo svg {
max-height: 30px !important;
height: 30px !important;
}
.site-header {
padding: 0px 0 !important;
}
.header-item–navigation a {
font-size: 0.7rem !important;
padding: 0px 0px !important;
}
}
Link to website : https://recollectedsweden.com/
This is normal behavior for Expanse theme. You have 5 menu items in the header. When you shrink the window size, they have to go somewhere. Until it reaches the breakpoint threshold of mobile styling, that’s what happens. The menu items wrap to a second row and a third row. What exactly do you want to happen when you shrink the window?
What is strange, and something I was not able to replicate, is the menu items text being forced together, losing the padding. I’ll just assume because I used a fresh install with no theme code edits.
Im not sure what the best sulution really is. Maybe it would be best that the klickable hamburger menu is displayed for all resulltions where the menu stacking happens until it is possible for the menu to be vissable without any problems.
We find it important the the website keeps the right ratrio so we dont get any white bars so it covers the entire mobile screen. I taking inspiration from acne studios website when trying to figure out the scaling myself.
link: Acne Studios - Shop the official site
The css we use is in my post.
Well that would require you to go into the code editor and change the mobile breakpoint for the entire header. Something I wouldn’t recommend on a paid theme. But, it’s either 767 or 768px. Search for that, change it all to something like 1025. Make absolutely sure you know what you’re changing, and make some duplicate theme copies before doing so.
