Skip to content
OverviewSolutions
31
Comments
8
Joseph Fola
@Fola-Joe

All comments

  • Joseph Fola•590
    @Fola-JoePosted almost 2 years ago

    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 than height: 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
    @vigneshajithSubmitted about 2 years ago
    • 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>

    order summary card challenge complete

    1
    Joseph Fola•590
    @Fola-JoePosted about 2 years ago

    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
  • Joseph Fola•590
    @Fola-JoePosted about 2 years ago

    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
    @klara367Submitted about 2 years ago

    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

    Responsive Huddle landing page using Flexbox

    1
    Joseph Fola•590
    @Fola-JoePosted about 2 years ago

    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
  • Joseph Fola•590
    @Fola-JoePosted about 2 years ago

    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
    @klara367Submitted about 2 years ago

    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

    Responsive order summary component using Flexbox

    1
    Joseph Fola•590
    @Fola-JoePosted about 2 years ago

    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
  • Joseph Fola•590
    @Fola-JoePosted over 2 years ago

    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
  • Joseph Fola•590
    @Fola-JoePosted over 2 years ago

    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, say padding: 10px, you could set images to width: 100%

    Marked as helpful
    2