Home Forums ART WordPress Theme I want the mobile version also for landscape orientation

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #25617
    nocivo
    Participant
    Purchased
    Supported

    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

    #25622
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsTwitterFacebook

    #25624
    nocivo
    Participant
    Purchased
    Supported

    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

    #25645
    nocivo
    Participant
    Purchased
    Supported

    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

    #25648
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsTwitterFacebook

    #25652
    nocivo
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #25653
    nocivo
    Participant
    Purchased
    Supported

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

    #25654
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsTwitterFacebook

    #25655
    SeaTheme
    Keymaster
    Purchased
    Expired

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

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

    Regards!
    SeaTheme – FAQsTwitterFacebook

    #25656
    nocivo
    Participant
    Purchased
    Supported

    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

    #25658
    SeaTheme
    Keymaster
    Purchased
    Expired

    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 – FAQsTwitterFacebook

    #25660
    nocivo
    Participant
    Purchased
    Supported

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

    Thanks again

    #25662
    SeaTheme
    Keymaster
    Purchased
    Expired

    You are Welcome!

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


    Regards!
    SeaTheme – FAQsTwitterFacebook

Viewing 13 posts - 1 through 13 (of 13 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!