Skip to content
Submitted over 3 years ago

Mobile first, vanilla CSS

Mallory•120
@azerroth11
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

For the first time I had a smooth coding experience, I know it's only junior level but still very pleasing ! The only difficulty I believe I faced was the background img that's supposed to go at the bottom of the mobile version. For some reason, after making it position: absolute, bottom: 0, right: 0; it wouldn't go at the bottom right of my mobile version but would instead stay as if I had coded it in the main hero (100vh). How am I supposed to set it if not absolute to the body ?

In the end, I just didn't include it.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, great work on this one. Though I need to zoom out to see the desktop state, are you coding in a large screen? Well upon looking at your repo now, I don't thing using min-height on a media breakpoint is a good idea. Use min-width since you are using mobile first approach and max-width for the desktop first.

    I can't really tweak that much since when I open dev tools, it occupies the height and since you are using min-height it is very hard to do so.

    A suggestion would be that , dd more spacing between the testimonial cards on the bottom.

    Also the background-image that you are using. Instead of using div elements on it, you can just embed that image in the background property on the body tag. This way you have saved extra html elements which is not really necessary since those are just for visual and not for content images.

    Still, good job on this one^

    1
  • Mallory•120
    @azerroth11Posted over 3 years ago

    Hey there, thanks a bunch for that awesome, detailed answer !

    I am indeed coding on a super ultra wide screen which makes it sometimes difficult to estimate the dimensions. I tried using the dev tools to give myself the viewport dimensons that are expected of me (first 375px wide for the mobile version and 1440px wide for the desktop version) but the end result when I uploaded was very far from what I had worked on and expected to see. I had to do some last second modifications.

    I'll definitely use min-width, you're right, I'm not sure why I used the other one !

    As for the spacing between the cards, I have been using "justify-content: space-between" so it really depends how wide the screen is. I'll try to find a way to have a set distance between the cards and a slightly-changing width on the cards if need be.

    I didn't think I still could position and work with my background images if I embed them in the background property of the body tag. I'll give it a try, thanks again !

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord