I’m making a website, and I’m pretty much done with it, except for one thing. See, I have an InfoComponent (or card for the sake of simplicity), and on the the 1st and 3rd cards, the images are on the left, but the second’s image is on the right. However, now when I view the site on larger screens, the image isn’t fully on the right.
Code:
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex h-full flex-col rounded-l-xl md:flex-row">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?implementations.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay1.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Implementations
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Whether it’s adding a new module to your existing Oracle PeopleSoft
application or replacing a legacy ERP, we will perform fit-gap
analysis, write data conversion processes and any other activities you
need to ensure a successful project.
</p>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
>
Upgrades
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
To use the most exciting enhancements Oracle PeopleSoft
has made in over a decade, you should be on application version 9.2.
We'll get you on the latest 9.2 image and tools version all while
using best practice techniques for a lower total cost of ownership.
</p>
</div>
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay2.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay3.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Ongoing System Support & Enhancements
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Are you taking full advantage of Integration Broker, using event
mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
objects, or implementing Fluid? If the answer is no to any of the
above, we'll turn that NO into a resounding YES.
</p>
</div>
</div>
</article>
</section>It seemed fine before, but now it broke. Why is this?
The images aren’t fully to the right side because you haven’t told them they should be. On smaller viewports, there is no surplus horizontal space within the cards, so all is well. With your flex layouts, the child elements will sit next to each other horizontally.
You may wish to spread them out to the extremes of the left and right. We can do this by setting justify-content: space-between:
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex h-full flex-col rounded-l-xl md:flex-row">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?implementations.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay1.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Implementations
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Whether it’s adding a new module to your existing Oracle PeopleSoft
application or replacing a legacy ERP, we will perform fit-gap
analysis, write data conversion processes and any other activities you
need to ensure a successful project.
</p>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full md:justify-between">
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
>
Upgrades
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
To use the most exciting enhancements Oracle PeopleSoft
has made in over a decade, you should be on application version 9.2.
We'll get you on the latest 9.2 image and tools version all while
using best practice techniques for a lower total cost of ownership.
</p>
</div>
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay2.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay3.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Ongoing System Support & Enhancements
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Are you taking full advantage of Integration Broker, using event
mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
objects, or implementing Fluid? If the answer is no to any of the
above, we'll turn that NO into a resounding YES.
</p>
</div>
</div>
</article>
</section>Or applying margin-left: auto to the image container:
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex h-full flex-col rounded-l-xl md:flex-row">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?implementations.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay1.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Implementations
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Whether it’s adding a new module to your existing Oracle PeopleSoft
application or replacing a legacy ERP, we will perform fit-gap
analysis, write data conversion processes and any other activities you
need to ensure a successful project.
</p>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
>
Upgrades
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
To use the most exciting enhancements Oracle PeopleSoft
has made in over a decade, you should be on application version 9.2.
We'll get you on the latest 9.2 image and tools version all while
using best practice techniques for a lower total cost of ownership.
</p>
</div>
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh] md:ml-auto"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay2.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay3.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Ongoing System Support & Enhancements
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Are you taking full advantage of Integration Broker, using event
mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
objects, or implementing Fluid? If the answer is no to any of the
above, we'll turn that NO into a resounding YES.
</p>
</div>
</div>
</article>
</section>Or applying margin-right: auto to the content container:
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex h-full flex-col rounded-l-xl md:flex-row">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?implementations.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay1.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Implementations
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Whether it’s adding a new module to your existing Oracle PeopleSoft
application or replacing a legacy ERP, we will perform fit-gap
analysis, write data conversion processes and any other activities you
need to ensure a successful project.
</p>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6 md:mr-auto">
<h2
class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
>
Upgrades
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
To use the most exciting enhancements Oracle PeopleSoft
has made in over a decade, you should be on application version 9.2.
We'll get you on the latest 9.2 image and tools version all while
using best practice techniques for a lower total cost of ownership.
</p>
</div>
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay2.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
</div>
</article>
</section>
<section class="flex items-center justify-center">
<!--Card-->
<article
class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
>
<!-- Flex Container -->
<div class="flex flex-col md:flex-row rounded-l-xl h-full">
<!-- Image -->
<div
class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
>
<img
src="https://picsum.photos/500/500?upgrading.jpeg"
alt=""
class="h-full w-full object-cover opacity-40"
/>
<img
src="https://picsum.photos/500/500?overlay3.svg"
class="absolute inset-0 h-full w-full object-contain p-8"
/>
</div>
<!--Content-->
<div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
<h2
class="text-4xl font-medium md:font-semibold text-white"
>
Ongoing System Support & Enhancements
</h2>
<p
class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
>
Are you taking full advantage of Integration Broker, using event
mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
objects, or implementing Fluid? If the answer is no to any of the
above, we'll turn that NO into a resounding YES.
</p>
</div>
</div>
</article>
</section>