*use :root to store all the colors; *CSS reset; *basic HTML & CSS

Solution retrospective
Hi everyone,
My name is LJBL, I'm so happy and excited to finish my first challenge in Frontend Mentor, though it did take me more time than I thought.
I have two questions below, and feel free to answer either of them, I appreciate it ^^!
-
I wonder how to avoid when users zoom-in their browsers and the format of text/paragraph going off. In this case, I assume FEM want all the text fix on the card, right? I asked because it's funny that I incidentally zoomed in my browser to 90% while I was coding..., luckily I found out before I submitting the work! I struggled like for an hour to check where went wrong lol.
-
Every time when I try to place an image, I just not sure which to choose the better, the property
background-image
, or a<img>
? Which do you prefer, or in which condition will you choose to use?
Thank you for your time :^D Happy coding!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @CodeWithAlamin
Hi LJBL👋 Great job on completing this challenge! 🥳
I would like to share a few suggestions on this solution if you don't mind.
To prevent text from breaking out of its container when the page is zoomed in, you can use the
overflow-wrap
property in your CSS. Theoverflow-wrap
property allows you to specify whether or not the browser should insert line breaks within words to prevent text from overflowing its container.In this case, you've already set the
overflow-wrap
property tobreak-word
for theh1
andp
elements, which will cause the browser to insert line breaks within words to prevent text from overflowing its container. This should help to keep the text within the card when the page is zoomed in.Here's an example of how you could use the
overflow-wrap
property in your CSS:p, h1 { overflow-wrap: break-word; }
Alternatively, you could use the
word-wrap
property, which has the same effect asoverflow-wrap
.p, h1 { word-wrap: break-word; }
Answering your second question: Both the
background-image
property and the<img>
element can be used to display images on a web page. However, they are used in different ways and are suitable for different use cases.The
background-image
property is used to set an image as the background of an element. It is applied to a specific element using CSS, and the image is displayed behind any other content within the element. Here's an example of how you can use thebackground-image
property in your CSS:body { background-image: url('/path/to/image.jpg'); }
The
<img>
element is used to embed an image in an HTML document. It is inserted directly into the HTML code and is treated as a standalone element that can be positioned and styled using CSS. Here's an example of how you can use the<img>
element in your HTML:<img src="/path/to/image.jpg" alt="Description of image">
In general, you should use the
<img>
element when you want to display an image as part of the content of your page, and use thebackground-image
property when you want to use an image as a design element or to provide a background for an element. However, there are no hard and fast rules, and you can use either approach depending on your specific needs and design goals.Overall, this is a very well done solution to the challenge. Great job!
I hope this feedback was helpful. 😊 Keep up the good work!👍
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord