bleak lark
i cant find an answer anywhere online as i dont believe there's anything in my code that would be putting a space around the hero background image. (this is one of my first times coding with html so please go easy on me lol). i also cant figure out how to reduce the spacing between the <h1> and <h3>.
hallow walrus
@bleak lark many html elements have default styles assigned by the web browser. In particular, all heading and paragraph elements have top and bottom margins by default. That is likely where your white space is coming from.
cunning cliff
Try add margin: 0; to your body in the css file.
body { text-align: center; margin: 0; }
bleak lark
thanks guys! @cunning cliff ive just done that and its removed the side margins but still no luck on the top part
hallow walrus
thanks guys! <@416835553351434241> ive just done that and its removed the side m...
That's because the margin attribute only applies to the element itself, not any child elements. If you want to get rid of the margins from the headings and paragraphs, you need to specify that, like this:
body, h1, h2, h3, p {
margin: 0;
}
i added margin: 0 to all elements and still no luck D: also cant seem to adjust spacing between the title and text below
cunning cliff
Sidenote: You're also missing a colon on object-fit, it should be object-fit: cover;
bleak lark
thank you
cunning cliff
Could you share your scrim or link to code?
bleak lark
chrome-extension://bgcopaeldiliblccidcdolfecjochhad/index.html
cunning cliff
Oh no that won't work for anyone else but you.
cunning cliff
You did it! Well done. This works.
bleak lark
haha
cunning cliff
h1 { margin: 0; }
bleak lark
yayyyy!!!
cunning cliff
Which is what @hallow walrus was suggesting. Just as you're learning (I'm also, yay for both of us) of course it's tricky to see.
bleak lark
ahhh i see what you mean now, so i must apply margin values to every single element not just classes?
cunning cliff
It depends.
But in short it can be helpful to remove the margins if what is displayed is not what is desired.
bleak lark
thanks so much guys
cunning cliff
This would also have worked:
.title { line-height: 4; margin: 0; }
bleak lark
cheers!
i still cant seem to reduce the space between the h1 and h3, i tried putting in line-height for h3 and it only reduced a tinsy bit
cunning cliff
It's the line-height on the h1 that is letting you down there.
