ROCKY BARUA• 1,090
@Drougnov
Posted
Hello @cenkderman, great job.
-
The design is looking perfect on the desktop viewport. But the text-content is exceeding the container in mobile view. Avoid using height if not absolutely necessary.
-
The google font link is wrong. In the HTML change your font link to this:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">```.
Or, just simply add this line at the top of your CSS :
```@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap');```
- Use a default font in the body tag. Ex: Montserrat and use the other one on the needed element. In this way, you can save some lines.
- Although you have beautifully added the images with display none and media queries, the semantic way would be using the
picturetag. Like this:
<picture>
<source media="(min-width: 650px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" alt="Gabrielle CHANEL's perfume bottle">
</picture>
Don't forget the alt text 😉.
You can check my solution for further information. If you have further questions, feel free to ask. Have a good day.
(edit) Having trouble formatting the comment. I hope you can still understand what I'm trying to say
Marked as helpful
0
