Image Content AddOn Not Really Responsive - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Image Content AddOn Not Really Responsive

MH

Matthias Heymann

SP Page Builder 5 months ago

Team, again some touble with responsibility of an Add On. Using Image Content Add On. Works fine in in desktop view and mobile portrait, but not on tablet, both landscape and portrait, also not on mobile landscape. Seems, that the image does not resize. I tried the trick, you used in another case ( height: fit-content; min-height: fit-content;), but that doesn't work either. Is this a general bug? There's no height/width setting for the image in this Add On, so shouldn't the image be fully responsive in this case? Try youself to resize the screen dynamicly: https://akk9dogs.com/akkj5/index.php/4sale Thanks again. Btw, I would apreciate, if you post a solution here, rather than fix it live ;-) I guess, other users might have the same problem.

0
3 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 5 months ago #196166

Hello Matthias,

Thanks for reaching out to us.

Please, use this css into your custom css, You can follow this documentation to add custom css: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

@media (min-width: 767px) and (max-width: 1399px){
div#sppb-addon-085fb771-5aef-40bc-ad9c-dc82aaab5284 .sppb-addon-image-content .sppb-image-holder {
    background-size: contain !important;
    background-repeat: no-repeat;
}
}

Thanks

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 months ago #196167

OR general style for all used Image Container addons || Mobile View only

  @media screen and (max-width: 860px) {
  .sppb-addon-image-content .sppb-image-holder 
    { background-size: contain; background-repeat: no-repeat; }
}

Use it inside Template Options > Custom Code > Custom CSS or custom.css file

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 months ago #196169

But indeed I saw the problem is on Laptop view (screen 1280px) , probably becuase that addon was designed mostly for photos (like nature, buildings, abstraction etc. where image can be cropped).

On your place I would use different addon Image Layout - where left image is not used as background, it means that whole dog photo will be displayed on all resolutions. Or classic way, two columns image addon and text addon.

Please consider change without CSS hacks.

0