@BernardusPH
Posted
Hello KLA MARIUS.
I see that you used the picture element but you used it as a parent for the text too. That is probably why you had so much trouble with the responsiveness. I got a good template to work off of.
html:
<body>
<main>
<div class="img-container>
<picture>////code/////</picture>
</div>
<div class="text-content">
/////code////
</div>
</main>
</body>
CSS
///this puts the card in the middle
body{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
main{
width:80%; ///u can calculate this///
display:flex;
}
main >*{
flex:50%;
OR
width:50%;
//Whichever you choose
}
Now you can play with the width/height/font-size more rather than worry about the card.
Hope this helps. You can ask for more info if you want
Marked as helpful
@Smatsher
Posted
@BernardusPH Thanks for your suggestion. I will ask for question soon. I'm still learning, and this is my second challenge here, and I must learn more and have some expectation about the layout before asking for something that make sense. Don't want to ask just to ask :D
@BernardusPH
Posted
@Smatsher There is nothing wrong by asking. This is not StackOverflow where you get executed when asking questions so do not worry.
Most of us here are happy to help out
Marked as helpful
