What is the best way to keep my deck components responsive and centered on the designated...

I'm trying to find a way to keep my deck components centered on the designated areas on my background image(play mat) when scaling to different screen sizes using tailwind. I have it working for my dimensions currently of course but would like to have it be responsive. I've set up my breakpoints in my tailwind.config.js for sm-xl screen sizes but each pixel change seems to nudge the cards very slightly and make them off center so, that solution hasn't worked. What is the best approach to keep these elements in the correct place when changing screen sizes?

Both decks(app-main-deck/app-material-deck) are just a card back image right now with some minimal styling:

<img src="../../../assets/card-back.jpg" class="w-[30%] h-[30%] border-4 border-transparent hover:border-ga-blue rounded-md">


Here is the full div with the two decks(main and material) as well as the background image. the app-hand component can be ignored:

<div class="relative overflow-x-hidden overflow-y-hidden">
<img class="max-h-screen min-h-screen w-full" src="../../../../assets/play-area.png">
<div class="absolute top-0 left-0 mt-4 left-2">
<button class="nav-button" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon class="text-ga-blue">menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button (click)="navigateToPage('/')" mat-menu-item>
<mat-icon class="!text-red-500">flag</mat-icon>
<span class="text-red-500">Surrender</span>
</button>
</mat-menu>
</div>
<app-main-deck class="absolute xl:bottom-[165px] right-[-76px] bottom-[185px]"></app-main-deck>
<app-material-deck class="absolute xl:left-[230px] xl:bottom-[160px] left-[237px] bottom-[185px]"></app-material-deck>
<app-hand (mouseenter)="hoverCards = true" (mouseleave)="hoverCards = false" [cards]="hand" (currentCard)="setCurrentCard($event)"
[ngClass]="hoverCards ? 'bottom-0' : 'bottom-[-275px]'" class="left-[8%] fixed overflow-hidden flex flex-row w-[85%]"></app-hand>
</div>


My tailwind.config.js:

theme: {
extend: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
},
}
}

Continue reading...