Home Forums Arnold WordPress Theme Mobile looks different on all browsers

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #20177
    linalina
    Participant
    Purchased

    This is how it looks on Safari & Chrome: https://ibb.co/KNwKwtZ
    This is how it looks on Brave & Firefox: https://ibb.co/1JTkY3b
    This is how it looks if i just resize my browser on desktop: https://ibb.co/BZNJHtJ

    Is it possible to have them all looks same – preferably as the first image, Safari & Chrome?
    Also: I would like to have a Scroll Down on mobile as well, and currently it is missing.

    Here’s the website: http://www.linazaitceva.com/cruelty-free-app

    #20178
    SeaTheme
    Keymaster
    Purchased

    Hi,

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

    @media (max-width: 768px) and (orientation: portrait) {
     .responsive-ux .fullscreen-wrap.post-cover, .responsive-ux.single-portfolio-fullscreen-slider .fullscreen-wrap {
        height: 100vh;
     }
    }

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #20180
    linalina
    Participant
    Purchased

    Hi,

    Thank you for your reply. It did fix it for Brave & Firefox mobile, however now, when I start scrolling down, the image does a weird zoom in. Please refer to the video: https://streamable.com/45ppx

    Also, let me know if it’s possible to add a Scroll Down on that Featured Image for the mobile.

    Thanks

    #20186
    SeaTheme
    Keymaster
    Purchased

    Hi,

    What’s browser and system the issue(show on video) is happened on?

    Also, let me know if it’s possible to add a Scroll Down on that Featured Image for the mob

    Plz add the custom CSS:

    .touchevents #ux-slider-down {
        display: block;
    }
    .touchevents #ux-slider-down:before {
        -webkit-transform: translate(2px,-15px) rotate(-60deg);
        -moz-transform: translate(2px,-15px) rotate(-60deg);
        -ms-transform: translate(2px,-15px) rotate(-60deg);
        transform: translate(2px,-15px) rotate(-60deg);
    }
    .touchevents #ux-slider-down:after {
        -webkit-transform: translate(2px,-12px) rotate(60deg);
        -moz-transform: translate(2px,-12px) rotate(60deg);
        -ms-transform: translate(2px,-12px) rotate(60deg);
        transform: translate(2px,-12px) rotate(60deg);
    }
    #20189
    linalina
    Participant
    Purchased

    Firefox & Brave

    #20195
    SeaTheme
    Keymaster
    Purchased

    Hi,

    It is caused the address bar on ios.
    https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d

    Plz fix it by the custom CSS

     @media (orientation: portrait) {
    .fullscreen-wrap.post-cover { 
        height: auto;
        padding-top: 177.7%;
    	 }
    }
    #20203
    linalina
    Participant
    Purchased

    Hi,

    Great, that has fixed it. However, it made the image height too much and now it goes off screen, together with the Scroll Down. I have tried changing height: 100vh; to height: 80vh; but no results.
    Picture: https://ibb.co/PQ1XQMz

    #20208
    SeaTheme
    Keymaster
    Purchased

    Hi, you could decrease the padding-top: 177.7%
    The height will not work.

    #20216
    linalina
    Participant
    Purchased

    That works, however the zooming in issue comes back

    #20217
    SeaTheme
    Keymaster
    Purchased

    Remove the custom CSS:

    @media (max-width: 768px) and (orientation: portrait) {
     .responsive-ux .fullscreen-wrap.post-cover,
    .responsive-ux.single-portfolio-fullscreen-slider .fullscreen-wrap {
        height: 100vh;
     }
    }
    #20222
    linalina
    Participant
    Purchased

    Perfect. Thank you for your help.

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