Issue
I have an html page on tailwind. I have all the sections in a container
<section class="sm:block pb-[70px] pt-[55px]">
<div class="px-[15px] xl:container">
<p>content </p>
</div>
</section>
But for one section you need to make sure that the left column is limited on the left as container and the right one is wide to the right edge of the screen I'm trying to apply these styles but the left column also goes beyond the container level
<section class="mb-[150px]">
<div class="flex gap-[25px] grid lg:gap-[65px] md:grid-cols-2">
<div class="flex flex-col justify-center md:text-left px-[15px] py-[24px] relative text-center pt-[115px]">
<h2>col 1</h2>
</div>
<div class="flex hidden md:block overflow-hidden">
<div class="xl:container">
<div class="overflow-x-hidden relative swiper main-home-slider swiper-initialized swiper-horizontal">
<h2>col 2</h2>
</div>
</div>
</div>
</div>
</section>
.container {
max-width: 1220px
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
Solution
You could consider using a grid element with custom grid row track sizes that line up with the container
widths. Have two grid column tracks of 1fr
at either end to act as the gutter, with more defined grid columns in the middle. This then allows the right content to span two grid column tracks so that it is aligned to the right edge of the screen, while the rest of the content is still within the centered container layout.
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<style type="text/tailwindcss">
@layer components {
.container {
max-width: 1220px
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
}
</style>
<section class="sm:block pb-[70px] pt-[55px]">
<div class="px-[15px] xl:container bg-blue-200">
<p>content </p>
</div>
</section>
<section class="mb-[150px]">
<div class="gap-[25px] grid lg:gap-[65px] md:grid-cols-[1fr_repeat(2,minmax(0%,calc((1220px-65px)/2)))_1fr]">
<div class="flex flex-col justify-center md:text-left px-[15px] py-[24px] relative text-center pt-[115px] md:col-start-2 md:pr-0 bg-green-200">
<h2>col 1</h2>
</div>
<div class="hidden md:block overflow-hidden col-span-2 bg-red-200">
<div class="xl:container">
<div class="overflow-x-hidden relative swiper main-home-slider swiper-initialized swiper-horizontal">
<h2>col 2</h2>
</div>
</div>
</div>
</div>
</section>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.