Breaking From a Parent Element in CSS

September 20, 2023

On my individual case study page, I had the responsive screenshot image breaking out of its parent element to make it span the entire width of the browser.

In the HTML, I just needed to wrap a div class around the image:


<div class="full-width">
   <img src="screenshot.png" alt="">
</div>

In the CSS, this is what I need:


.full-width { 
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
   }

That works, but you will get the horizontal scroll. To get rid of the scrollbar, you need to add the following lines at the top of your CSS:


 html, body { 
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   overflow-x: hidden;
   }

It worked, but felt a bit hacky. I removed it from my case study pages, but reposted it just in case I need to get back to it later.