Home > Software engineering >  Row of images that has the same left margin as other content
Row of images that has the same left margin as other content

Time:02-25

My goal is to add a row of images that has the same margin-left as the other content on the page, like the title in the image below. The row of images should scroll horizontally and be visible to the end of each side of the page. The content on has max-width: 90rem and margin: 0 auto

How would you solve this?

Horizontal scroll and correct margin

CodePudding user response:

From what I get, you want to 'break' the centering of the carousel div with images, and want to have a full width container inside a wrapper container.

This should do the trick:

.alignfull {
    margin-right: calc( 50% - 50vw );
    margin-left: calc( 50% - 50vw );
    width: 100vw;
    max-width: 100vw;
}

This centers you div insides it, and gives it -50% margin on both sides in order to match the screen size width.

Source: one of the Twenty themes of WordPress.

  • Related