Hey there! I have a little design puzzle that needs solving.
On mobile, everything looks great with 3 items displaying in full width. But on desktop, I'm facing a challenge:
I want section A to be right above section B, while section C should remain on the right side. However, there's some unwanted space around section A that I can't seem to get rid of.
For mobile (current setup is working fine for this code snippet): https://i.sstatic.net/scwWa.png
Expected Desktop Look: https://i.sstatic.net/Oimf2.png
Actual Desktop Output: https://i.sstatic.net/F9Z9L.png
If you could take a look at my code snippets and help me achieve the desired effect, that would be awesome!
.flex{
display: flex
}
.flex-col{
flex-direction: column
}
.bg-blue-50{
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity))
}
.bg-purple-50{
--tw-bg-opacity: 1;
background-color: rgb(250 245 255 / var(--tw-bg-opacity))
}
.bg-red-50{
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity))
}
@media (min-width: 640px){
.sm\:w-4\/12{
width: 33.333333%
}
.sm\:w-8\/12{
width: 66.666667%
}
.sm\:flex-row{
flex-direction: row
}
.sm\:flex-wrap{
flex-wrap: wrap
}
}<div class="flex flex-col sm:flex-row sm:flex-wrap">
<div class="bg-red-50 sm:w-8/12">Section A</div>
<div class="bg-purple-50 sm:w-4/12">Section B
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indu...unchanged.
</div>
<div class="bg-blue-50 sm:w-8/12">Section C</div>
</div>