Overflow-x

Support
#1

Hi,

I am trying to get the image in this footer to overflow along the x axis so it shows on either side of the cell its in.

https://darrenh214.sg-host.com/

I’ve set the image to block, given it a fixed width of 350px, set the object fit:cover and set the div it sits in to overflow-x:visible.

Is there something else I can try?

thanks,
Darren.

#2

Hi Darren,

Thanks for reaching out!
It’s a bit unclear what the exact visual result is that you’re trying for. However, just to clarify — in order for an image to overflow horizontally and be visible outside of its containing cell, all parent and ancestor elements must have overflow-x: visible.
If you can share a bit more about the design you’re trying to achieve — or an example reference — we’d be happy to take a closer look and suggest.

Thanks

#3

Hey Tristup,

This is the look I’m going for. I had already tried overflow-x and now have it set to !important and added to every parent DIV, Cell, Container and Bar for the object but is still showing as cropped.

Footer-screenshot.
Footer-screenshot.769×1032 412 KB

#4

Hey @DesignMunky,

The maximum width of the image is set to 100% which is why it does not overflow. To get around this, you can add this inline element CSS in your Cell element:

$el.x-cell .x-image img{ 
  max-width: none !important;
}

Kindly let us know how it goes.

#5

Hey Reunel,

It didnt work initially, but changing the Overflow-Y to Visible in cornerstone builder for the Div got it working. For some reason you need both X and Y showing visible.

THanks again!

#6

Hey @DesignMunky,

Good to know that you got it working.