I am trying to position content slightly off screen, but when I set it to absolute (as seen in demo below) the "home" section doesn't expand to fit and causes school bars when the screen isn't larger than the images. If I change it to "responsive" the images are scaled down, I would like them full size.
Is there a way to position the content slightly off screen using flexbox? If not what is a method I could use to get this done the right way? I want 1/2 of the 3rd image to be slightly off screen.
Thanks, I hope my question is clear. To view it functioning as intended please click "run snippet" and then click "full screen" on a desktop. To see the scroll bar simply do not click the "full screen" button.
.hero-img {
width: 100%;
height: auto;
}
.img-container {
max-width:345px;
max-height:580px;
}
.inner{
position: absolute;
right: -172px;
}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<section id="home" class="main lg:pl-28 flex flex-wrap flex-row w-full h-screen">
<div class="flex flex-col w-full lg:w-5/12 justify-center lg:pr-28 bg-green-200">
<p class="text-lg mb-0 text-gray-600">Title 1</p>
<h1 class="mb-4 text-3xl md:text-5xl font-bold leading-tight text-center md:text-left slide-in-bottom-h1">Title 2</h1>
<p class="leading-normal text-base md:text-2xl mb-8 text-center md:text-left slide-in-bottom-subtitle">Title 3</p>
</div>
<!--Right Col-->
<div class="outer w-full lg:w-7/12 overflow-x-hidden relative flex items-center bg-red-200">
<div class="flex gap-4 inner">
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580" class="hero-img">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580" class="hero-img">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580" class="hero-img">
</div>
</div>
</div>
</section>