Issue
This project is done with Angular and Tailwind CSS.
Issue:
My divs do not take up all the space available. Each 'a' is a div with a blue background color. The whitespace is the empty space I would like to get rid of
My code: Here are the simplified contents of my main html file
<div class="container !mx-0 flex flex-row justify-between">
<app-photo-card
*ngFor="let photo_card of photo_cards"
[photo_card]="photo_card"
[class]="'w-full'"
></app-photo-card>
</div>
simplified contents of main ts file
photo_cards = [
{
title: 'a',
content: "",
img_src: '',
},
];
and here are the contents of my photo card component html file
<div class="w-full">
<div class="w-full bg-blue-500">a</div>
</div>
Tried a similar version of this code with vanilla html and css and it seemed to work as expected. Really unsure on what I'm doing wrong here.
Expected output would be the 4 'a' divs with the blue background spanning across the screen which would result in no whitespace.
Solution
It turns out my issue was that the tailwind css container
class has a max-width
property setting.
class breakpoint properties
container None width: 100%;
sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px) max-width: 1536px;
Removing the container
class worked for me.
Answered By - jspoh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.