Angel Estevez• 100
@AEPEX25
Submitted
This my first solution for frontendmentor using HTML and CSS. I appreciate any feedback.
Joseph Fola
@Fola-Joe
All comments
- Joseph Fola• 590
@Fola-Joe
Posted
Nice work you have here! 😎🎊 Firstly, ensure you have all your CSS codes in your CSS file. It's a pretty good practice. So you could get rid of the style tag in the HTML file. The padding on the class .container is too much. Try reducing it to 2rem, 2.5rem, 3rem etc. Also, try making use of
min-height: 100vh;rather thanheight: 100vh;, so that peradventure your page content gets more than usual, you can scroll to see the remaining content. I hope this helps! Happy coding!Marked as helpful
1 - vigneshajith• 80
@vigneshajith
Submitted
- Hi every one i am vignesh a beginner to this coding world. this is my first challange in frontent mentor. please give your feedback for my solution.
- I face difficult to positioning this div child in proper order but i manage to do that.
- If you have better way to that please let me know thank you.
<div class="anual"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="none" fill-rule="evenodd"><circle cx="24" cy="24" r="24" fill="#DFE6FB"/><path fill="#717FA6" fill-rule="nonzero" d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"/></g></svg> <p class="p"> <strong>Annual Plan</strong></p><p style="margin-top: 26px; left:15px;" class="p">$59.99/year</p> <a class="a" href="">Change</a> </div>
Joseph Fola• 590@Fola-Joe
Posted
Congratulations on your first project here! 😎🎉🎉 So, a few things to consider - concerning the music icon, you could have just used
<img src="images/icon-music" alt="">rather than the long svg tag you used. Also, try to avoid using inline CSS.You could solve the whole div issue using this:
<div class="price"> <div class="left-side"> <img src="images/icon-music" alt="music icon"> <div class="inner-left-side"> <h3>Annual Plan</h3> <p>$59.99/year</p> </div> </div> <a class="a" href="">Change</a> </div> .price { background-color: hsl(225, 100%, 98%); border-radius: 0.8rem; padding: 0.85rem; display: flex; justify-content: space-between; align-items: center; } .left-side { display: flex; align-items: center; } .inner-price-left { margin-left: 1rem; }You can make adjustments to the values and more often, use rem or em instead of px. Of course, you can make use of your own class names 😄 I hope this helps, happy coding!😁🎈
Marked as helpful
0 - Emmanuel Omoogun• 40
@Abiodun1Omoogun
Submitted
One thing I found difficult in this challenge is media queries
Any feedback on how I can improve?
Joseph Fola• 590@Fola-Joe
Posted
Well done on your first project on Frontend Mentor 🎉🎊 Just make a little adjustment to your css code. First, set your main width to a definite value rather than using percentage
main { max-width: 370px; }You could as well not give the 'main' selector a 'height' property, but edit your body height to min-height and not max-height. I hope this helps! Happy coding!
Marked as helpful
1 - Klara• 270
@klara367
Submitted
Hi everyone,
I would appreciate it, if you could take a look at my code and tell me if there are some parts that could be written better or more efficiently.
After submitting I noticed, that in comparison, my solution has text on four lines whereas the design has it on three lines. But in my browser it looks like given design. Do you have any idea why is this happening? I used relative unit.
Thank you
Klara
Joseph Fola• 590@Fola-Joe
Posted
Very nice work you have here 🎉 Regarding your second question, I think you should check this out, especially the article on pixel-perfection: How to get the most out of Frontend-mentor
Marked as helpful
1 - David• 80
@DavetOluwapelumi
Submitted
Joseph Fola• 590@Fola-Joe
Posted
A great work you have here!
Although, you should make use of the mobile image for the mobile view. You could add it alongside your desktop image in your html code and use this css code:
@media screen and (max-width: 425px) { .desktop-img { display: none; } } @media screen and (min-width: 426px) { .mobile-img { display: none; } }I hope this helps, happy coding!😀🎊
1 - Klara• 270
@klara367
Submitted
Hi everyone,
I would appreciate it if you could have a look at my code, especially on the responsive part. I set max-width to 375px and expected it to be changing with the width of the phone, but it's not. Could you give me some tips on how to fix this problem?
Thank you
Klara
Joseph Fola• 590@Fola-Joe
Posted
Nice work here! I love it! I would recommend working on a mobile-first workflow before working on the media query for larger screen sizes. So I'd suggest setting
.card {max-width: 375px;}and in your media query(min-width: 376px), you could increase the max-width. I hope this helps.Marked as helpful
0 - Andrés Domínguez• 20
@andredomin
Submitted
How could I avoid putting negative values in the margins and so many media-queries? Thank you in advance!
Joseph Fola• 590@Fola-Joe
Posted
I think with these, you won't need to set margins like you did. Also, you could do well with just one stylesheet. Happy coding 😇
1 - Andrés Domínguez• 20
@andredomin
Submitted
How could I avoid putting negative values in the margins and so many media-queries? Thank you in advance!
Joseph Fola• 590@Fola-Joe
Posted
Nice work here. I believe you could make use of
text-align: center;for your paragraphs. You could as well put in your content in a div or main(whichever you would like). After, setting your padding, saypadding: 10px, you could set images towidth: 100%Marked as helpful
2
