DanielChicagoCane

Looks like I was able to get it *close* to perfect with this bit of CSS:

Commented it out

Site URL: https://www.chicagocane.com/ Want to get my hero image to look correct on mobile. As it stands this is what it looks like clipped off at the top: The CSS I have right now is the following:

No because at different sizes it's off center:

Site URL: https://www.chicagocane.com/about Second recent post here! I'm wanting to make sure our hero image are centered properly and fixed at all screen sizes. I've tried "position: fixed !important" but it just obscures the header image comletely: I've also tried these parameters (this is how I've saved the website right now): [data-section-id="628f9adc5694847784f21805"] { max-width: 100vw !important;margin-top: 15px !important; margin-bottom: 15px !important; margin-left: 0px !important; margin-right: 0px !important; } With these settings the image isn't centered properly on different width screens. --- Any ideas on how to center this hero image on all screen sizes would be much appreciated!

Nevermind I found it playing around inspecting the code. thanks!

This worked great although I found that for my purposes using 50vw instead of 95vh accomplished exactly what I needed!

Thanks! Could you point me to how you found that section id so I can apply to the other pages and know how to in the future? Guess I should inspect the source html and look for that id to get an id of which div or section of code the proper id comes from?

Site URL: https://www.chicagocane.com/ Our hero image is getting covered by the header and the section below it depending on screen dimensions/layout. We uploaded it as a background so that the stripes would bleed to the edge (as is part of our brand). I'm trying to apply a min-height CSS snippet for the image but can't find the proper id for it? I'm thinking a vh of 90-100 should work. Would appreciate any advice on how to properly apply min-height to this image and other hero images on the site!