[strawberryfieldslaneParticipant]

Hi there – I’ve got a few flip cards across a row in 4 even columns – but when I resize the screen and make it smaller, the cards and thusly their bg-image do not adapt and shrink as the screen diminishes. Is there any way to accomplish this?

[FriechModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[strawberryfieldslaneParticipant]

The sites not public yet but i’ll unlock it for a while. The url is http://www.strawberryfieldslane.com – just the home page – i also noticed that when resizing the window the 4 cards which should all be the same size, don’t scale quite evenly…any solution here? or maybe a way to hide them if someone makes the window too small?

[ChristopherModerator]

Hi there,

Please find following codes and update background-size: cover; property to background-size: contain; :

.x-card-outer.mycard2 .x-face-outer.front .x-face-inner {
    background-image: url('http://strawberryfieldslane.com/wp-content/uploads/2016/09/closegear1.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.x-card-outer.mycard3 .x-face-outer.front .x-face-inner {
    background-image: url('http://strawberryfieldslane.com/wp-content/uploads/2016/09/closegear2.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.x-card-outer.mycard4 .x-face-outer.front .x-face-inner {
    background-image: url('http://strawberryfieldslane.com/wp-content/uploads/2016/09/closemic.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.x-card-outer.mycard5 .x-face-outer.front .x-face-inner {
    background-image: url('http://strawberryfieldslane.com/wp-content/uploads/2016/09/concertwindow.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

To hide cards elements, please use visibility options under section/row settings.

Hope that helps.

[strawberryfieldslaneParticipant]

Switching the code to Contain now leaves the cards not being filled by the background image – if you refresh the page now, the graphic doesn’t fit the card anymore. And resizing it make each card change in different ways. Do I need to make the actual cards smaller? I thought 200×300 was the right size for the graphics.

Thanks for the continued support

[strawberryfieldslaneParticipant]

If i need to make the images another size, thats no problem either..just let me know what size they should be. Thanks

[RadModerator]

Hi there,

Since the card is responsive, its dimension will change too. Either Cover or Contain can fix it, but personally, I’ll prefer Cover since it will not leave empty space.

Since background image is only limited to its container, it will be cropped when setting to Cover. Contain means no cropping, but may leave gaps since it will try to fill the container while maintaining the aspect ratio.

You can try this,

background-size: 100% 100%;

Fit both width and height without respecting the aspect ratio, but that means it will stretch.

There is no best solution than Cover styling when working on background image.

Thanks!

[strawberryfieldslaneParticipant]

Thanks – the background size 100-100 and using hiding seems to be the best solution thus far. I think that solves this question. Thanks!

[ThaiModerator]

If you need anything else please let us know.

[Author]

Posts