Home Forums Air WordPress Theme Mobile issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23915
    applemint
    Participant
    Purchased
    Supported

    Hi,

    1. The logo in mobile view is cropped. In Theme Options, Custom Logo Height for Mobile is set to 100, so that the logo would be well readable. However, this crops it. How can this be avoided?

    2. The way that header background photo on home page shows up in portrait view on mobile has some issues. It first shows up distorted, it then re-calibrates and frames it in a way that’s not ideal for this image. I like to have it a little off-center, so that the person in the image shows more central of the frame. Landscape view on mobile is fine.

    #23916
    applemint
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #23919
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    1.Please paste the custom CSS code to “Appearance > Customize: Additional CSS”

    @media (max-width: 767px){
    .responsive-ux .navi-logo .logo-wrap,.responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-h1 {
        line-height: 100px;
        height: 100px;
     }
    body.responsive-ux #header-main > .container-fluid { height: 100px;}
    }

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

    @media (max-width: 768px) and (orientation: portrait) {
    .fullwidth-wrap:not(.fullwidth-half) .back-background-img { 
        left: 72%;
     }
    }

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #23927
    applemint
    Participant
    Purchased
    Supported

    Thank you!

    1. I added another 5px to height (in both places) and not to line-height, as it was still cropping a little on the bottom.

    @media (max-width: 767px){
    .responsive-ux .navi-logo .logo-wrap,.responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-h1 {
        line-height: 100px;
        height: 105px;
     }
    body.responsive-ux #header-main > .container-fluid { height: 105px;}
    }

    2. it is looking better than before, no more distortion (maybe because I removed password to view site?). But changing percentage doesn’t seem to change center of background header image.

    #23929
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    1. I checked again and didn’t find the cropping. You could add padding for the logo image file, re-upload the new logo.

    2. Please update the CSS:

    @media (max-width: 768px) and (orientation: portrait) {
      .ux-mobile .back-background-img-mobile{background-position: 40% 50%;}
    }

    you could adjust the 40%

    Regards

    #23935
    applemint
    Participant
    Purchased
    Supported

    1. Indeed it is no longer cropping since I added the 5px as mentioned in my previous message. Though adding padding to the logo, would also be an elegant way to fix it.

    2. Thank you for the updated code. This works and looks splendid. Thank you!

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