Solved SP Page Builder

Keeping the original proportions of an image

Asked by Alex Walker 3 years ago Last activity 3 years ago

I have added images using the Image Content addon such as here: https://jamesmackie.art/marbles
All the images are the same size an proprtion (boxed) and I want them to retain their original size and dimension in the thumbnail. How can I do that please?

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

3 years ago

Oh, I think I know.... it's problem for Devices with screen between 576 - 767px, here is a solution:

@media screen and (min-width: 576px) and (max-width: 767.98px) {
.sppb-addon-image-content .sppb-image-holder {
  position: inherit; width: 100% !important; height: 300px;}
}

8 more replies

Rashida Rahman Staff

3 years ago

Hi there!

Thanks for contcting us.

This addon has the image as background image, so it does cover the whole space of the container/holder. So, it's probably not possible to get the original proportion of the image in the image content addon.

Here is a sample screenshot: https://prnt.sc/lO3CvJbViHLm

Best Regards

Paul Frankowski Senior Staff

3 years ago

Hi Alex,

it's better to use Image Layout addon where image is < img > not a background-image CSS.

keep addon that you have already but use below custom CSS

.sppb-addon-image-content .sppb-image-holder {
  background-size: contain;}

becuase by default it's background-size: cover (!)

Alex Walker Asked this

3 years ago

Paul see jamesmackie.art/marbleemarblesmarbles
marbles
suspension 2. - how can i have only one image displaying?

Paul Frankowski Senior Staff

3 years ago

Are you sure that URL is correct, I see Error 500 there.

Here is small update of my Custom CSS, should be:

.sppb-addon-image-content .sppb-image-holder {
  background-size: contain;
  background-repeat: no-repeat;}

then only 1 image will be displayed. Add it inside Template Options > Custom Code > Custom CSS and then will be used everywhere.

Alex Walker Asked this

3 years ago

Paul, that worked perfectly! Thank you!!!

Paul Frankowski Senior Staff

3 years ago

I am glad that I could help. Please mark topic as solved.

Alex Walker Asked this

3 years ago

Paul, just one more thing. when viewing the image in Landscape on a mobile the text covers the image. Can the text go beneath or alongside the image?

Alex Walker Asked this

3 years ago

Paul, can you let me know if you have seen this post? i still have one more related question. thank you. Alex

Paul Frankowski Senior Staff

3 years ago · edited

when viewing the image in Landscape on a mobile the text covers the image

Can you show me screenshot link, on Mobile view (browser elmulator) looks OK

Alex Walker Asked this

3 years ago

P E R F E C T Paul. Thank you. Alex