Photo/border issue with reduced breakpoints

Support
#1

Hi there,

I’m working to optimize pages at smaller breakpoints and when I adjusted the image size of this photo, it affected the border around it.

That border is a solid white one at 10 pixels, fairly straight forward. The image itself is going past the border. How do I keep that border contained around the image regardless of the output size of the image?

On a related note, do you recommend any best practices for this when I’m reducing content down for smaller breakpoints?

***(Please answer this) Should I be duplicating sections of my site, then adjusting them for specific breakpoints, then hiding them based on their size? That seems like a lot of extra work when I could be adjusting the CSS grid information and layout, which is what I’ve been working to do.

Border issue on photo
Border issue on photo1626×789 211 KB

#2

Hey Tyler,

For your image problem, I’d recommend deleting the Image element and instead set the image as a background of the Cell then set the Top padding of the Cell to a percentage value (see screenshot in secure note).

For now, duplicating is still the way to go. But, we agree that you should set settings depending on screen size that is why the Responsive Styling feature is on the way. You can learn more here https://theme.co/content/status-report-may-14-2021

Pro 5 BETA is available for download now so you can test-drive the new features in A TEST SITE.

Just note that we do not provide support for the beta version so it should not be installed on a live site.

image
image831×259 38.5 KB

Hope that helps.

#3

Thank you for the guidance on this. It’s my first site using Pro so there’s been a big learning curve. You all have been wonderful while I navigate this. It’s very much appreciated.

#4

We are delighted to assist you with this.

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.