I'm proud to have been able to create this design so quickly and to have used the Sementic tag.
What challenges did you encounter, and how did you overcome them?Nothing to note
What specific areas of your project would you like help with?I'm not sure I got the same shadow effect.
Hey, great work completing this challenge, your HTML looks semantic and you achieve the main concern of placing the grid.
Just one thing that I am noticing is there you are using px unit for your font-sizes. Prefer to use rem for your site be readable in larger screens and also small too. You can learn more about the rem unit and how to use it from here. Also, I always use a site to convert px values to a close rem, I can not recommend using it too.
PLUS: You can set the max-width for your cards to ~23rem, this will prevent it to grow as the width grows too.
Again, your HTML is pretty good, keep it up with this awesome work.
I'm proud of the result
What challenges did you encounter, and how did you overcome them?nothing to report
What specific areas of your project would you like help with?nothing to report
Hello! You've done a great job—it's nearly perfect.
I just have a few points to cover to help you improve it even further:
While viewing on a mobile screen, I noticed that the image source doesn't change. You can fix this by replacing the figure with a picture and adding different sources with breakpoints. Here's an example:
<picture> <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="Perfume bottle"> </picture>
When using picture, ensure to set the display property to contents: display: contents.
By default, the <picture> element behaves like a block-level element, meaning it takes up the full width of its parent container. However, the <img> element inside it behaves like an inline-level element. This means that any padding, margins, or borders applied to the <picture> element will affect its layout, potentially causing unintended spacing or alignment issues.
Setting the display property of the <picture> element to contents alters its behavior. The contents value causes the <picture> element to behave as if it were not there in terms of layout, essentially making its children (in this case, the <source> and <img> elements) direct children of the <picture> element's parent. This ensures that any styles applied to the <picture> element itself do not interfere with the layout of its children.
I noticed that the card grows on mobile but doesn't shrink less than 350px due to your clamp(350px, 75%, 750px). Here's how to address this:
clamp for the min-width of the article.max-width of 350px for the card on devices with screens smaller than or equal to 768px. This way, you'll only need to consider two variations: desktop and mobile. This ensures the card doesn't grow excessively but can still shrink for very small screens.For your price, you could add flex-wrap: wrap. This will prevent the price from overflowing on small screens.
TIP: For desktop, the max-width of the card could be 600px, and for mobile devices 350px. This could simplify centering the card using flex-box.
PLUS: There are several ways to center an element on the page. But instead of using position and transform, you could utilize flex-box, where it remains a cleaner way and helps us deal with responsiveness, and I saw you already know how it works. Here's an example::
body { display: flex; justify-content: center; align-items: center; min-height: 100svh; /* Ensure your page occupies all available height */ }
I hope this feedback helps you improve your solution. Feel free to ask anything, and if you'd like, I can create a PR on GitHub to assist you further!
I appreciate how you've made your HTML semantic and opted for CSS selectors instead of creating classes—awesome!
Keep up the good work and happy coding!
It was my first, I am pround to finish it
What challenges did you encounter, and how did you overcome them?Make a website responsive, and I still strogling. I have to study more about it
What specific areas of your project would you like help with?helpping to make a website responsive.
Hello there! Congratulations on completing your first challenge. 🎉
I noticed it was finished a couple of months ago, and I'm pleased to be the first to provide feedback.
I'll consider your previous comments and the areas where you seek assistance as valid. Please don't hesitate to ask if you require further clarification. This also presents a wonderful opportunity to revisit this challenge and enhance it with the experience you've gained since then.
Before jumping into responsiveness, please correct the color of 'Preparation Time' to color: hsl(332, 51%, 32%);. This will improve the readability of the title.
Regarding responsiveness, we have a few things to be mindful of:
We should allow our content to shrink and grow based on the content but also be able to control the max and min width and height of elements.
.card { max-width: 375px; /* The maximum width that a .card could have is 375px, but the card still able to have a 360px. */ width: 100%; /* By setting the width with 100%, we ensure our .card will always occupy all available space on the screen, in that case 375px */ }
As we know our contents could grow and shrink based on the width, we essentially want the same thing to happen with our height. By setting a fixed height, we ended up getting contents overflowing the limits of the parent. So, in most parts, we'd want to set a height of 100%, so the height of the .card will increase based on the wrapping of the content (a text as an example).
I found these two great documentation resources to know a little bit more about the max-width and width properties:
I also have a few things about your HTML and CSS:
We should avoid using divs as much as possible in our code since it is generic HTML and doesn't have much accessibility for screen readers.
<div> to represent and create the card style, you could use an <article> tag.<section> when dealing with the same article but in different sections, like 'Preparation Time', 'Ingredients', and 'Instructions'.About your CSS, prefer to use classes and specify selectors to style, as it maintains great readability (example: article.card { ...your_css_code }) and also prevents having the same id on the page.
background-color of the 'Preparation Time' section.:not selector combined with :last-child. Example:
section.recipe table tbody tr:not(:last-child) {
border-bottom: 1px solid var(--light-grey-color);
}
:last-child to remove the border:
section.recipe table tbody tr:last-child {
border-bottom: none;
}
And you can learn more about semantic HTML and CSS selectors here:
I hope this feedback helps you to improve your skills further. Keep up and happy coding!
Hello Santiago! You've done an awesome job with this preview. It looks beautiful in the desktop view.
I have some suggestions to further improve its responsiveness:
.card { padding: 1.5rem; margin: 1rem; /* This ensures your card will not occupy the full width of the screen */ max-width: 370px; /* With this, your card contents will not overflow a 370px width */ width: 100%; /* Ensures your card always fills the available width, in this case, 370px. Feel free to adjust this value */ }
100px. Also, the margin isn't required because you have a flex set to align-items: center in your card:.avatar { width: 100px; height: 100px; border-radius: 50%; }
You'll notice your h1 isn't center aligned. You could fix this by setting text-align: center;.
For your buttons, you don't need to have padding. Instead, you can set the section-buttons to have a width: 100% and the buttons too. This will fit all available horizontal space in the card and maintain the spacing because of the card spacing:
.section-buttons { display: flex; gap: 13px; flex-direction: column; flex-wrap: wrap; justify-content: center; margin: 15px 0px; width: 100%; /* Set the section to occupy all available space */ } button { background-color: hsl(0, 0%, 20%); font-weight: 700; color: hsl(0, 0%, 100%); border-radius: 10px; cursor: pointer; border: none; width: 100%; /* Ensure the button occupies all available width */ height: 2.5rem; }
Tip for semantic HTML: Prefer to use anchor tags when referring to other pages or anything related to the user's navigation, and buttons to perform actions such as submitting a form, opening a sidebar panel, or clicking a like button on a page. I found this great answer about it When should I use a button - Stack Overflow.
I hope you find this helpful, and feel free to ask anything related. Above all, your solution is great! Happy coding!
Basically everything
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
Hello! Great job on the blog preview!
I have some suggestions to refine the design further:
Consider using height: 100vh; instead of defining the height in pixels for the body to ensure it fills the entire screen:
body, html { height: 100vh; background-color: hsl(47, 88%, 63%); }
To center align items within your main element, you can utilize the existing display: flex; property and add align-items: center; and height: 100%;. This will ensure the main section occupies the full available height.
Enhance the box styling with a solid shadow effect:
.blog--container { box-shadow: 8px 8px 0px black; }
Don't forget to include a hover state for the card. Use CSS selectors to change the title's color to yellow and increase the box shadow when the user hovers over the card:
.blog--container:hover .blog--title {
color: hsl(47, 88%, 63%);
}
.blog--container:hover {
box-shadow: 16px 16px 0px black;
}
Plus: Add transitions for a smoother hover effect. Apply a transition property to the .blog--container and .blog--title elements: transition: your-css-property 0.3s ease
For more information on transitions, refer to the MDN Transition docs.
Overall, your work is commendable, but these tweaks will enhance the design and user experience even further. Keep up the great work!
Write CSS code again after a long time.
What challenges did you encounter, and how did you overcome them?Trying to make my card responsive.
What specific areas of your project would you like help with?More challenges
Hello there! Great job completing this challenge.
In all frontend mentor challenges, the starter folder will always include a file named style-guide.md, which contains information about typography, such as font weight, as well as the color palette used in the design.
With that in mind, I have a few suggestions for improving the UI to closely match the design:
Update the body background-color to use hsl(212, 45%, 89%).
Set the text color of the "Scan QR Code..." section to hsl(220, 15%, 55%).
The h3 doesn't need a color; you can simply use font-weight: 700;. Here's the suggested typography:
.card-box .content h3{ font-weight: 700; font-size: 22px; line-height: 28px; }
As long as you match the typography, it's also important to match the size of the card. For the maximum width, ensure the card doesn't exceed 320px (including padding). Calculating: 320px - 16px padding right - 16px padding left = 288px of maximum width. And for the card to react to a small screen, prevent it to get the full width of the screen by adding a margin: 0 16px
.card-box { max-width: 288px; padding: 16px; padding-bottom: 40px; border-radius: 20px; margin: 0 16px; }
For the image, remove both width and height percentage values. Setting a maximum width of 100% will ensure the image adjusts to the size of the .card-box, which has a maximum width of 288px. The height property will be automatically calculated.
.card-box img { max-width: 100%; border-radius: 10px; }
The last thing that will be missing is the card box shadow:
.card-box { box-shadow: 0px 25px 25px rgba(0, 0, 0, 4.77%); }
You've done a great job centering the content using margin: 80px auto. To further improve it, consider using a dynamic value in the margin: margin: 15% auto. But also try another approachs like using flex-box properties.
Additionally, you've effectively utilized media queries and CSS variables to set the card width based on the screen. While these are valuable for responsiveness, given that we have dynamic values for our image, the content can naturally adjust in mobile devices without the need for additional media queries.
