#im stumped on the hometown project

8 messages · Page 1 of 1 (latest)

void saffron
#

not sure what im doing wrong with the middle section for adding a background and getting it to cover the entire area

void saffron
#

hopefully that link takes you to my code

#

im also unsure why my pictures arent turning into circle shapes. im using border radius

#

as well as why my background isnt stretching side to side lol. clearly ive messed a few things up

sullen ledge
#

Your background isn't stretching side to side because you did not only set a max-width on your #hero. But, you also put a display: flex (even twice) on h1 and h2. That is not correct. Remove these.

No reason to set a height on your h1 and h2. If you want to add space between the background-color and the text, use padding. Also remove the width of these 2 elements. If you want them not to be touching the border of the image, add a padding to #header.

I didn't see border-radius anywhere in your code. If you add a border-radius: 50% to img it will be circles. Also give them space using flex-properties on .to-do and add some padding. (Except the per-image, so add a class here and give it either a width & height, or an aspect-ratio: 1/1 and object-fit: cover).

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

You have a background-size on your .to-do. It's useless here. It works only when you're using it with images.

As for the activities. You can also just take of height and width. You wrote section to be 33% wide. Which means each section will take up 33% of available space. So no reason to declare a width on them (you can, it's not wrong). Giving them a height is not good practice. Avoid giving height to things (though this will become more clear the more you move on in the course).

object-fit - CSS: Cascading Style Sheets | MDN

The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.

aspect-ratio - CSS: Cascading Style Sheets | MDN

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

background-size - CSS: Cascading Style Sheets | MDN

The background-size CSS property sets the size of the element's background image.
The image can be left to its natural size, stretched, or constrained to fit the available space.

delicate field
#

As Katrien said you have added a lot of properties to your elements which are making it difficult for you to debug.

You have items with fix width which is the reason why it isn't stretching.

Take it easy when adding CSS, simply your code, it will help you easily get the result you want without needing to add any complex CSS properties.

void saffron
#

Okay I’ll look all this over when I get home from work later. Thank you guys