Day 10: Using CSS on the shop

Styling the shop page

This lesson will be tricky. But also fun. There are more elements on the shop page than on the home page or the index page, and I imagine that means more classes of CSS. Let's dive in.

When styling the shop items, I encountered that display: block; property/value again. This allowed me to remove the <div> around each product name while still making sure the product name sits on top of the image for the product.

Flexing my skills

I used the display: flex; property for the shop item details (the price and the 'add to cart' button). This was so I could center the items, though I'm not really too sure why I used this. More reading is required. For the price, I set flex-grow to 1, which means the price will take up the whole row. I'm not sure about this, but I'm keeping with it.

Woah! Well it turns out I just needed to put everything into a <div> and use the following CSS to 'flex wrap' the content so that it stacks when the browser window is small enough that it needs the elements to stack. This flex property is tricky! But powerful.

.shop-items {

display: flex;

flex-wrap: wrap;

}

Basically - this is how I should build responsive websites.

I left it here since it was a tricky lesson so far, and it's late and I'm hungry for my dinner. I will pick the video up from 12:27 tomorrow, where I'll learn how to style the cart section. "The most complex section" of the page. Yikes!

Here's my shop page so far.