@Zy8712
Posted
Your site looks good and functions properly. To answer your question, if you wanna make more room for your advice you should probably adjust your box's layout (specifically with the divider). In my opinion, you should have the divider and button be locked into position using position: absolute
. Additionally, you should have the Advice# be placed relative to to the top and a box of a certain size dedicated to the quote.
So basically (you roughly need to):
- Change button from
position: relative
toposition: absolute
- Add
position: relative
to your.card
class - Remove
justify-content: flex-end
from your.card
class - Add
position: absolute
andbottom: 30px
to your.separator
class - Change
.card h4
to have amargin-top: 40px
andmargin-bottom: 5px
- Modify
.card h2
to:
display: flex;
flex-direction: column;
justify-content: center;
color: var(--lightCyan);
margin-top: 5px;
margin-bottom: 20px;
width: 450px;
height: 200px;
font-size: 28px;
This code I wrote is very rough, so you should modify as you see fit. Hope this helps to some degree 👍
Marked as helpful