DanWebb
7/28/2016 - 9:12 AM

Make an element the full width of the page or parent, source: https://css-tricks.com/full-width-containers-limited-width-parents/?utm_source

Make an element the full width of the page or parent, source: https://css-tricks.com/full-width-containers-limited-width-parents/?utm_source=html5weekly&utm_medium=email

full_width.css
content_copyfile_download
/* for elements that need to be full width of the window */
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* for elements that need to be full width of a parent container */
.parent {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}