Skip to content
OverviewSolutions
17
Comments
17
walmanjm
@walmanjm

All comments

  • Ghadeer Alnujaidi•10
    @GhadeerNSubmitted about 3 years ago

    Hello everyone👋🏽

    This was my first challenge, and it was an incredible learning experience! I had to think about the annual plan card and how to make it. I decided to use three div tags displayed in an inline-block and play around with the width and the margins. Is there anything simpler and more organized than this?

    Any comment you have are welcome and appreciated 👍 Thank you 🌸

    Order summary card using HTML&CSS

    2
    walmanjm•425
    @walmanjmPosted about 3 years ago

    Hi Gadheer, it's seem you got it all,

    but if you have some time, please check my solution for this challenge, hope you can find some good comparison in it,

    Order summary component

    0
  • walmanjm•425
    @walmanjmPosted about 3 years ago

    Hi Lang,

    maybe you can add some space in top and bottom for mobile view,

    thanks ✌,

    0
  • Patryk Besler•355
    @beslerpatrykSubmitted about 3 years ago

    Hello 👋 This is my "Order Summary Component" solution using pure HTML and CSS. I used a CSS grid for the overall layout. If you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as a front-end developer. Thank you 😁

    Order Summary Component

    1
    walmanjm•425
    @walmanjmPosted about 3 years ago

    hi Patryk ,

    you need to check your mobile view , its seem out of space

    thanks, ✌

    Marked as helpful
    1
  • Alisa Zarina•20
    @alisazarinaSubmitted over 3 years ago

    My first Frontend Mentor challenge! I'm having a little trouble making the page fully responsive, as there's a bit of a break in between the 768px-992px media queries formatting. Added left-right padding in the 768px screen size, whixh results in the "break" (ie. excess padding).

    Otherwise, all should be working fine. But if my aforementioned problem has a solution, please do let me know! I'd be really grateful as media queries are still a puzzle for me!

    Mobile First - Stats Preview Component

    1
    walmanjm•425
    @walmanjmPosted over 3 years ago

    @alisazarina Hi,

    yes you are right, there is a break ,

    if you have some time you can compare with my solution, i hope it can help ✌

    Stats Preview Card Component

    Marked as helpful
    0
  • Dan•90
    @gawnadSubmitted over 3 years ago

    Hello fellow coders, Just completed another project. Love this site as it gives me hands on experience with the code as I'm sure we have all been on an online course and feel like we have learnt so much till it comes to building a site yourself and end up stuck. Please feel free to comment on how my code looks and anything that would be a better practice for me as I'm willing to learn and giving it 110%

    Thank you in advance.

    stats-preview-card-component-main

    2
    walmanjm•425
    @walmanjmPosted over 3 years ago

    Hi Dan,

    you need to check your img-box in mobile version,

    its seems the image is not appear, it only the overlay-color is appear

    happy coding 👍

    0
  • walmanjm•425
    @walmanjmPosted over 3 years ago

    Hi Joy ,

    maybe you need to center text__heading and text__description in mobile version,

    in desktop i think it's all good 👍

    0
  • walmanjm•425
    @walmanjmPosted over 3 years ago

    it's all good , nice job, 👍

    1
  • walmanjm•425
    @walmanjmPosted over 3 years ago

    Hi,
    i think you get it all, desktop and mobile is good 👍

    Marked as helpful
    1
  • walmanjm•425
    @walmanjmPosted over 3 years ago

    nice, i think you got it all

    1
  • walmanjm•425
    @walmanjmPosted over 3 years ago

    Hi, @mitpatel7

    looks good too,

    maybe you need a litle touch in mobile its seems the margin is to large,

    and try adding margin: 0 auto; in body to make content stay in center in biger screen,

    happy coding 👍✌,

    Marked as helpful
    0
  • walmanjm•425
    @walmanjmPosted over 3 years ago

    thanks @mitpatel7, ok i will,

    0
  • atanasov36•640
    @AtanasovCodeSubmitted over 3 years ago

    Enjoyed doing this one!

    The only thing that I couldn't seem to figure out is how to lower down the review boxes to achieve the effect of one being lower than the other. This is how I did it:

    • I used the margin-top to make the review box shorter than the one next to it.
    • Than I used the padding-bottom - to give it more padding at the bottom so that it canbe the same size as the othrer box.

    I think this worked well with the 3rd box but the second box would gain the same amount of padding no matter the value that I input. Why was that and is there a better way to achieve this?

    Responsive Social Proof Landing Page Using HTML, CSS

    3
    walmanjm•425
    @walmanjmPosted over 3 years ago

    hi,

    if you wanna stick around with your " margin" way ,

    you have to calculate the margin-bottom: margin-top: ,

    something like this :

    in your code, you put review-1 review-2 review-3 inside reviews ,

    the margin-bottom: of review-1 is should be margin-top: of review-3 ,

    and the margin-bottom: margin-top: of review-2 should be between ,

    in code like this :

    .review-1 {
  margin-bottom: 2rem;
}
.review-2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.review-3 {
  margin-top: 2rem;
}

    we can say this the traditional way to what @alwodzicki suggestion with flexbox

    by the way take a look also in mobile its need some correction,

    and don't forget about the :

    bg-pattern-bottom-desktop.svg

    bg-pattern-bottom-mobile.svg

    bg-pattern-top-desktop.svg

    bg-pattern-top-mobile.svg

    happy coding 👍👌

    Marked as helpful
    1