My first challenge HTML / CSS - Product preview card component

Hi, nice work with your solution! I like the hover effect on the button! 👍🏻

You don't need to use <br/> for the line break! In this case, the difference between desktop and mobile layout is due to the padding of the right/bottom container. It's a bit hard to notice, but it's slighty bigger in the desktop view, that makes the text wrap erlier than in the mobile view.

Also, I reccomend the <picture> container for the img. You can specify many sources for your image and when they displayed or not, depending on the viewport. I personally find this way easier than using media queries. And you can give your <img> a width:100% and a height:auto to keep the aspect ratio.

Hi @Fidget836 🙋‍♂️

Congratulations on completing your first challenge 👏 really good stuff 👏

Usually <br> tag is used to signify a line break so using it in a single sentence is semantically a bad idea. Instead you can set the title a max-width using the super useful ch unit, where ch stands for characters.

h1 { max-width: 15ch; }

LEARN MORE

• br tag is bad
• ch unit

And if you want change the width of the title for wider screens you can use the media queries

@media (min-width: 720px) { h1 {max-width: 10ch;} }

*This change of style will appear when the screen resolution is 720px or more 😄 *

Learn more about Media Queries

• know more

Hey!

There are certain ways you can get the text to drop (width / font-size / line-height etc). But since you put the <br> within the text itself, when the media queries kick in, it's still going to be reading that break in there.

Also make sure to put some info in the alt tags. Something even I forget from time to time.