Tea Cozy Project

Finally! Done!



It looks good! I love it how you structured the html and css using comments and space between the lines. It makes it very clear where what is and less packed than my own code was.

As for a piece of advice: the website looks good, but doesn’t fully follow the instructions. The location section also isn’t optimal (background image is too wide, the title unreadable and on the left of the addresses instead of above).

Do you have some feedback points you want from the community?

1 Like

Thanks. Greatly appreciate the feedback.

I adjusted the width of the locations section, so it should now follow the specs. But I looked at the page in Google Chrome and in Microsoft Edge and both showed that the heading “Locations” is above the address boxes and is readable, so I don’t know why you saw it as “unreadable and on the left of the addresses instead of above.” Note, though, that I have yet to address responsive viewing issues with the page.

Once again, thanks for the feedback. I welcome all feedback because I want to learn and to constantly improve.

I was viewing it on my Macbook, so that’s a small screen. Not sure what caused it, now I watch it on my main computer and it looks very good.

On my computer there are still two things off. The featured tea images are on one row due to the width not been set. If you take the tea-images class and give it a max width of 1000px, it should be good and flex wrap will make put the two images below the other tree. To clean up your code you can remove the div class=“teamages” part as it seems to do nothing (because it is a flex container, it’s not put on a second line which is what I think was your thinking behind it).

The second thing is that the footer main text is not centered. Think there are more ways to fix it, but I would just not make it a flex box and use text-align center + margin: auto to center the text (h5 will still be on the left). I would also remove the width because if it then is shrunk below 1100px the text still centers.

As for responsive viewing: I’m at the same point in the course so we don’t have all the tools needed for it (or experience). So I wouldn’t worry too much about it. You did a great job with it. :smiley:

1 Like

Once again, thanks for spending the time to give great feedback.

When I view the page, the featured tea images are on two lines, three on top and two on the bottom, so I did not need to make changes there. I did not remove the teamges div because when I did the layout became askew. I also tried removing the tea-images div, but it also made the layout bad. I did, however, find that it was not necessary to display the tea-images as a flex container, so I removed the CSS rule regarding that. I followed your suggestion regarding centering of the footer text, but I kept the width at 1100px because it follows the specs, although I see that the text would remain centered if the width was changed.

You certainly gave me some pointers. I was kind of groping around in the dark as far as divs and positioning, but your feedback has given me better insight. Be sure to let me know whenever you need someone to review your code.

Yeah, that can happen because of screen size. Setting the width did the trick for the tea images in that there are three on the first row and two on the second. The two on the second row are left-aligned though. Should be an easy fix if you play around a bit with the various flex properties we learned. :slight_smile:

May I ask why 1100px wide for the footer text? The rest of the content has a with of either 1200px or 1000px (I would go for the latter to keep symmetry). When I shrink my screen down, the footer text gets miss-aligned.

And you’re welcome. :slight_smile: I learn a lot myself from this as well.

1 Like

The two images on the second row are centered when I view it on my laptop. I don’t know why 1100px, but that was in the specs. You know, when I take out the tea-images div in my visual studio code files, everything works fine. But when I do the exact same thing in githup, the images fall in a long column. Anyway, this exchange with you has got me thinking more deeply about every line of code. So, thanks!

It was in the specs? I must have missed that. I thought it to be 1000px. xd

And you’re welcome. :slight_smile:

1 Like