@induwara-thisarindu
Posted
Hi good job on the submission first of all I want to say I am no expert so I will help as I can. In your css I noticed that you have written this,
h1,h2,h3,p,div,img,section,article,main,ol,li,ul {
margin: 0;
padding: 0;
}
I believe it will be better if you do it like this,
*{
margin: 0;
padding: 0;
}
I believe It is much more easier to write and time saving.
Also, I think adding a height to body is what is causing the problem try removing that line and see I think the image will be visible in every screen
html,body {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
The problem is that you are adding an overflow to both html and body maybe just add it to body like this
body {
overflow: auto; /* Ensure content is scrollable if necessary */
}
That's all I have to say Hope this helps 😊🎉
@medic-code
Posted
@induwara-thisarindu
Thanks for the feedback!
For the first change I think i'm being a little lazy here as it feels a little shotgun to use normalize css for these small projects, but yes indeed i may just use * { } instead from here on. I'd have a proper CSS reset in a live project.
Thanks for the tip about height:100% I think I was using this to center the card with flexbox, as you need to define the parent container as having a height of 100% or 100vh. Your suggestion does get me closer to the overflowing problem it but will need to think of a different way to center.
I suspect i wont need the overflow setting on html,body if i remove height:100%.
Gets me a little closer, thanks!
@induwara-thisarindu
Posted
@medic-code do you just want to center the card?