I want the mobile version also for landscape orientation

[nocivo]

Hi,
I have a Oneplus 7 smartphone and when I load the webpage in landscape orientation, it display the desktop version. The header have the desktop logo (not the mobile logo) and the menu items are visible (and messed) without the hamburger icon. The height of header is too big because is the desktop version (it cover 1/3 of the screen). The grid have 3 column with little thumbnails, instead of one big. The vertical orientation it’s OK.

I want the mobile version also for landscape orientation like in the vertical orientation.

Please let me know how to manage the resolution limit for desktop, tablet and mobile.

Maybe there is the resolution limit too low for modern smartphone with high resolution? why don’t use the screen size or dpi to recognize the device screen? it is possible with the current technology?

Thanks

[SeaTheme]

Hi,

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

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

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[nocivo]

Thanks for support, but now it is changed only the hamburger icons.

I’d like also that in the landscape mode there are the same logo (mobile version), header height and one column for grid than in mobile vertical orientation.
It would be good that in landscape mode it recognize as mobile, not tablet or desktop, because I use some group option, “hide for desktop” and “hide for mobile”.

thanks

[nocivo]

any answer to the previous message?

In mobile landscape mode the header is too big covering 1/3 of the screen, have three columns instead of one and the logo is the desktop version. At least in my mobile phone, Oneplus 7. Maybe there are the same issue in all phones with high resolution. for example iphone.

thanks

[SeaTheme]

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:
It will define the header height as 80 for mobile landscape.

@media (max-width: 920px) {
	.responsive-ux.header-sticky:not(.page_from_top) #wrap-outer {
		padding-top: var(--header-height-mobile, 80px);
	}

	.responsive-ux .header-main, .responsive-ux .menu-panel:not(.menu-panel-bottom-centered) .menu-panel-bottom {
		height: var(--header-height-mobile, 80px);
	}

	body:not(.page_from_top).responsive-ux .menu-panel {
		margin-top: calc(0px - var(--header-height-mobile, 80px));
	}

	body:not(.page_from_top).responsive-ux #wrap {
		top: var(--header-height-mobile, 80px);
	}

	.responsive-ux.header-sticky:not(.page_from_top) #wrap-outer, 
	.responsive-ux.header-sticky-back:not(.page_from_top) #wrap-outer, 
	.responsive-ux.header-sticky-none:not(.page_from_top).ux-header-hide-body #wrap-outer,
	.responsive-ux.page_from_top .portfolio-panel {
		padding-top: var(--header-height-mobile, 80px);
	}

	.responsive-ux .menu-panel:not(.menu-panel-bottom-centered) .menu-panel-bottom .search-top-btn-class,
	.responsive-ux .menu-panel:not(.menu-panel-bottom-centered) .menu-panel-bottom .socialmeida,
	.responsive-ux .menu-panel:not(.menu-panel-bottom-centered) .menu-panel-bottom .wpml-translation li {
		line-height: var(--header-height-mobile, 80px);
	}

	.ux-password-form {
		min-height: calc(100vh - var(--header-height-mobile, 80px) - var(--header-footer, 80px));
	}
}

To define a different height value, please add custom CSS like(*do not remove above CSS)
body { --header-height-mobile:70px; }

Please leave your website URL, I will check how to adjust the logo and Grid based on the actual situation of your website settings.

Regards

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[nocivo]

This reply has been marked as private.

[nocivo]

there is one more problem. in the landscape mode when expand the hamburger menu, the text of the items is too big.

[SeaTheme]

I found your website URL in another topic.

Please add custom CSS to adjust the logo and Grid:

@media (max-width: 920px) {
.logo-a > .logo-image {
    display: none!important;
 }
.logo-image-alt-mobile {
  display:block;
 }
 .ux-portfolio-3col .grid-item {
    width: 100%;
}
}

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[SeaTheme]

Please add custom CSS to define the expanded menu font size :

@media (max-width: 920px) {
 .navi .menu li > a {
    font-size: 20px;
 }
}

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[nocivo]

Thank you so much, very good support. There are some other things that was not good in landscape mobile mode (like the logo take the desktop size), but I have solved by myself.

Anyway there is one more thing (maybe the last to have the look that I want) that I cannot solve by myself:

The slider on the home page is set to fluid height at 100% of the screen height. It works well on desktop mode but in mobile (chrome and Firefox on android) don’t show the low part of the image where is the caption text, I have to scroll to see it. But this is not as it should work. In vertical mobile mode I solved by set the 95% of the “height for mobile”, but I don’t know how to adjust it on landscape mode (max-width: 920px).

https://curanzio.com

Anyway it would be good if you correct this in the next versions because maybe is a bug.

thanks again

[SeaTheme]

Hi,
Please try to add the custom CSS:

@media (max-width: 920px) and (orientation: landscape) {
 .module-id-1568607326884,
 .home .slider-inside {
  --slider-height-style1: 85vh;
 }
}

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[nocivo]

The support is very well and fast. Now the website look well in all devices.

Thanks again

[SeaTheme]

You are Welcome!

If you like ART theme, don’t forget rate it on Themeforest. I would greatly appreciate 🙂

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[Author]

Posts