Okay
  Public Ticket #2564958
scaling background image on mobile device
Closed

Comments

  • Jantine Lanting started the conversation
    October 9, 2020 at 1:22pm

    Hi,

    In this section (http://www.tjardastip.nl/feestineendoosje/#wie) I used the background image behind a column. But on a mobile device the image is cut off on the left and right side. I would like to make this fit. Is there a way to fix this?

    Thanks in advance!

    With kind regards,

    Jantine

  •  2,965
    Andrew replied
    October 9, 2020 at 4:59pm

    Hi Jantine,

    Thanks for reaching out.

    Try the following custom css in Salient > General settings > CSS/Script related:

    @media only screen and (max-width: 1000px) {
    .wpb_column[data-bg-cover="true"] .column-image-bg, .wpb_column .column-inner[data-bg-cover="true"] .column-image-bg {
    background-repeat: no-repeat;
    background-size: contain !important;
}
}

    Hope this helps.

  • Jantine Lanting replied
    October 10, 2020 at 1:44pm

    Hi Andrew,

    Thanks, yes it works! But now there's a lot of white space below and above. I gave it a background color, that looks better. But it would be better if the box adjusts to the height of the photo. But I can't manage doing that. Do you also know a solution for that?


  •  2,965
    Andrew replied
    October 10, 2020 at 2:44pm

    Hi Jantine,

    Add the following custom css:

    @media only screen and (max-width: 1000px) {
.veelgesteldevragen-toggle {
    margin-top: -35vh;
}
.full-width-content.vc_row-fluid .wpb_column .column-image-bg-wrap .column-image-bg {
    margin-top: -34vh;
}
}

    Thanks.

  • Jantine Lanting replied
    October 11, 2020 at 12:31pm

    Hi Andrew,

    Thanks, that worked a little. But the bottom margin is still very big. I tried to add  'margin-bottom: -35vh', but that doesn't work. Now I changed the -34vh to -10vh, and then the space above and below is more or less the same. But the height of the area where the photo in, stays the same. 

  •  2,965
    Andrew replied
    October 13, 2020 at 12:41pm

    Hi Jantine,

    Thank you for reaching out again.

    Kindly paste the following code in your custom css code Salient > General > CSS/Script Related: 

    @media only screen and (max-width: 1000px){
.full-width-content.vc_row-fluid .wpb_column .column-image-bg-wrap .column-image-bg {    
margin-top: -13vh !important;    
height: 496px;    
background-size: cover !important;
}
}

    Regards

  • Jantine Lanting replied
    October 15, 2020 at 3:17pm

    Hi Andrew,

    When I add 'background-size: cover !important;,  the image is cut off on the left and right side again. So I deleted that and then it looks a little better, but there's still a big margin under the photo.
    I think it's good enough for now, thanks for your help!

    Regards, Jantine

  •  2,965
    Andrew replied
    October 19, 2020 at 11:23am

    Hi Jantine.

    Sorry for the late response.

    We are glad you found a way out the issue.

    Kind Regards.