DEV Community

milindsoorya
milindsoorya

Posted on • Edited on • Originally published at milindsoorya.com

3 1

CSS to ignore parent padding in 4 lines

Introduction

CSS is damn hard. It's these small problems that will take up your entire day and energy and the will to live. And one such notorious problem has been to make a child element break out of their parent's padding.

The problem

I recently tried to add a newsletter to my website (subscribe - shameless plug) and I wanted the form to extend to the side of the browser window, but there is a parent div with padding for getting that uniform look throughout the site.

how it looks with parent's padding -

1

how I wanted it to look -

2

this happens because the section containing newsletter is within the main div -

3

Yeah I know, It sound's really simple and there are many janky solutions out there to fix it too. (The solution down below is more or less jank, but in relative terms, I believe it is really elegant 😁).

Solution

Give this below piece of CSS to the element you wish to break out(pun Intended).



.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}


Enter fullscreen mode Exit fullscreen mode

The max-width is required because otherwise, you may find a horizontal scrollbar.

yeah, It's that simple.

UPDATE:
As I wanted the newsletter on every page I decided to move the section div one level up, so to the same level as the main. Hence, I don't have to do this hack.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay