Hey everyone
I’m building my portfolio site and working on a case study page, and could really use some help.
The issue:
I have a header image that sits outside of the container margin, that normally scales and doesn’t get cut off at all. However, for some reason, at smaller breakpoints (tablet size and lower) the right side is getting cut off.
I’ve spent far too many hours trying to figure this out, so I thought I’d ask.
Part of my issue is that this is happening within a grid (which I don’t quite understand yet).
This whole section confuses me honestly.
It was part of a template I purchased, so I’m trying to deconstruct it and understand how it works, but obviously at this point I’m failing.
I’ve included a couple screenshots of when it’s working fine and when it’s not, as well as the site read only link obviously.
Happy to answer any questions.
Thanks so much.
Image overflow issues at smaller breakpoints can affect your site’s mobile responsiveness. To resolve this, you can implement several effective solutions:
The most straightforward fix is to use percentage-based widths and max-widths. Set your parent elements to 100% width and ensure child elements are 100% or less to maintain proper containment. For decorative images, converting them to background images often provides better control over their responsive behavior.
To identify the exact elements causing overflow, enable X-ray mode in Canvas settings - this will help you visualize element boundaries. You can also hover your cursor over extra whitespace while in Designer mode to pinpoint problematic elements. For thorough testing, try clicking and dragging the edge of the canvas at different breakpoints to verify your design remains intact across all device sizes.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hello @troy,
The issue you have has to do with your main grid. On mobile landscape and portrait it is overflowing because it is set to occupy three columns, two of those with min max values that don’t fit on smaller screens, so to fix that you have to modify your slide up animation divs. I made a quick loom to better show you how to change those divs. I hope this helps.
