it would be better if you but height : fit-content on the cards
๐๐ฒ๐น๐น๐ผ ๐๐ต๐ฒ๐ฟ๐ฒ ๐, ๐'๐บ ๐๐ฎ๐บ๐๐ฎ ๐ฎ๐ป๐ฑ ๐๐ต๐ถ๐ ๐ถ๐ ๐บ๐ ๐๐ผ๐น๐๐๐ถ๐ผ๐ป ๐ณ๐ผ๐ฟ ๐๐ต๐ฒ :
Four card feature section. ๐ค
โจ Follow me on my journey on completing all the free HTML/CSS challenges ( 10/26 )
Any suggestions or feedbacks on how I can improve and reduce unnecessary code are welcome! Thanks you ๐๐ซถ
The first challenge was adding a distance between list markers and text. I found a solution in Stack overflow page.
The second challenge was a nutrition table, where I couldn't make an underline below the nutrition value. I decided to add 4 tables for every single nutrition value and add div with underline class under every of the tables.
What specific areas of your project would you like help with?In the instructions section, the wrapped text is under the list number, which shouldn't be there, but I can't find a solution for this problem
You have done a good job with the challenges you have faced. I have some advice to offer:
1.Nutrition Table Problem
html
<div class="table">
<div class="box border-1">
<div class="key">Calories</div>
<div class="value">277kcal</div>
</div>
<div class="box border-1">
<div class="key">Carbs</div>
<div class="value">0g</div>
</div>
<div class="box border-1">
<div class="key">Protein</div>
<div class="value">20g</div>
</div>
<div class="box">
<div class="key">Fat</div>
<div class="value">22g</div>
</div>
</div>
Then, use Flexbox to style it:
css
.table .box {
display: flex;
justify-content: space-around;
}
2.Wrapped Text Under the List Number
<p> tags like this:html
<ul>
<li>
<p><span>Total: </span>Approximately 10 minutes</p>
</li>
<li>
<p><span>Preparation: </span>5 minutes</p>
</li>
<li>
<p><span>Cooking: </span>5 minutes</p>
</li>
</ul>
This is my first try on this challenge. Any feedback or suggestion would be appreciated.
Using rem and em instead of pxin CSS offers significant advantages, especially when it comes to responsive design, accessibility, and maintainability. Hereโs some feedback on the benefits of adopting rem and em units:
Advantages: 1.Responsive Typography:
remand em are relative units, making it easier to create scalable layouts. When users adjust browser settings (e.g., zoom or base font size), designs based on rem/em scale appropriately, whereas px-based designs remain fixed.
2.Accessibility:
Relative units like rem and em respect user preferences, especially for those with visual impairments who adjust their base font size for better readability. Designs using px ignore such user-defined settings, potentially causing readability issues.
3.Consistency Across Devices:
rem and em units ensure consistent rendering across various devices and screen sizes. For example, using rem for layout dimensions allows elements to scale based on a userโs default font size, creating a more fluid and adaptable design.
4.Easier Scaling of Elements:
By using rem for root-level elements and em for nested elements, you can control the scaling of individual components more effectively. This flexibility is helpful for modular design systems, where you want components to be flexible and adapt to their context.
5.Maintaining Proportions:
Using relative units helps maintain proportions between text sizes and other layout elements (like padding, margins, etc.), which becomes crucial for responsive designs. This eliminates the need to manually adjust pixel values for different breakpoints.
