Home Forums Arnold WordPress Theme Decrease proportionally the picture on the slider (our main page)

This topic contains 7 replies, has 2 voices, and was last updated by  SeaTheme 2 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #12429

    Fernando DAmico
    Participant
    Purchased

    We have bought Arnold theme some time ago and modified it in our child theme.
    You can see our site there: http://fernandodamico.com/.
    We have one problem on mobile devices (iPhone 5,6,7). We want to image in the slider decreases in proportion to the width of the screen, so we can see on the mobile exactly the same picture like on computer or laptop.
    But now the picture does not decrease proportionally, it is simply placed on the center of the screen and cut off from the left side and from the right side.

    We set for the image the next css:
    .ux-background-img {
    background-repeat:no-repeat !important;
    -webkit-background-size:cover !important;
    -moz-background-size:cover !important;
    -o-background-size:cover !important;
    background-size:cover !important;
    background-position:center !important;
    }

    but it didn`t solve our issue.
    Hope you can help us. If you need a more accurate description please let us know.

    Thank you.

    #12431

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,
    Please remove your css for .ux-background-img, try to use the custom css:

    @media (max-width: 767px) {
     .ux-background-img {
        background-size: contain !important;
     }
    }

    Cheers!
    Bwsm – uiueux.comTwitterFacebook

    #12432

    Fernando DAmico
    Participant
    Purchased

    Thank you! I changed the code but I see black band above the slider (image). Can I remove it (only for mobile)? Please chow me the code.

    #12433

    Fernando DAmico
    Participant
    Purchased

    Screenshot of the black band

    #12438

    SeaTheme
    Keymaster
    Purchased
    Supported

    Please update the custom css as:

    @media (max-width: 767px) {
     .ux-background-img {
        background-size: contain !important;
        background-position: 50% 0;
     }
    }
    #12453

    Fernando DAmico
    Participant
    Purchased

    Thank you!
    Can we delete the black band at the bottom of the mobile screen?
    Can we show the slider on full height with a proportional decrease?

    #12455

    Fernando DAmico
    Participant
    Purchased

    Please disregard my pervious message.
    I really appreciate your support and have last question for you.
    How can we set on mobile 50% height for slider and 50% height for navy blue band?
    Please look at attached screenshot.
    height_50

    #12456

    SeaTheme
    Keymaster
    Purchased
    Supported

    Please disregard my pervious message.
    I really appreciate your support and have last question for you.
    How can we set on mobile 50% height for slider and 50% height for navy blue band?
    Please look at attached screenshot.

    Please update the css:

    @media (max-width: 767px) and (orientation: portrait) { 
     .ux-background-img {
        background-size: auto 50% !important;
        background-position: 50% 0;
     }
    }

    Tips: the “orientation: portrait” is for portrait mode of mobile only.

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