Skip to content
Submitted almost 2 years ago

Basic Grid / Flex excercise

Daniel Dekany•920
@dknyd
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

Hi Peeps,

Hope everyone is doing great! :)

So I have finished -so to say- this project, I know it is kinda bootleg still (please keep in mind, im self taught), so as usual, any constructive criticism is apreciated.

My main questions would be:

1.) How can I change the order of elements? I should use that for the mobile view with the media query. The star ratings are over the reviews and under the paragraphs when in mobile view -while in desktop view, star ratings are on he top of my 3rd column in a grid container, so as you can see the star ratings get between the reviews when you change the view to mobile.

2.) How to change the stars to be on top of the text when in mobile view? You can see, the star ratings' layout changes when in mobile view, in desktop view they are on the left side of the container with the text being on the right side, but when in mobile view, they get to the top of the text and both the text and the stars are centered.

3.) Any other way to put the 5 stars than to actually make 5 <img> tags? Sounds kinda complicated, is this how it is done?

Many thanks in advance as usual guys!

Community feedback

  • LorenaFrias•80
    @LorenaFriasPosted almost 2 years ago

    Hey Daniel!

    I'm still working on this challenge but I'd like to help anyway.

    • You could begin mobile-first design: title section then ratings and finally testimonials. That way you've got the right order for mobile devices.

    • About your second question: in your media query .rate# { display: flex; flex-direction: column; } This should place the stars above the text.

    Hope this helps! 😊

    Marked as helpful
    1
    Daniel Dekany•920
    @dknydPosted almost 2 years ago

    @LorenaFrias thank you so much for the suggestions, I will try to implement them! :)

    0
    Daniel Dekany•920
    @dknydPosted almost 2 years ago

    @LorenaFrias hey, I tried to follow your advice and prepared the mobile view first, you can check the result in the second version of my solution, it worked wonders, thank you! :)

    Is this a general advice which should be taken into consideration for all projects in general?

    0
    LorenaFrias•80
    @LorenaFriasPosted almost 2 years ago

    @trezmor it looks wonderful! I'm so glad it worked.

    You know, mobile vs desktop seems to be a matter of personal preference. I would argue for coding mobile first but after analysing the desktop design.

    At least, that's what I do. I take a look at the desktop design, how the "boxes" are organized, whether I'll be using flex or grid to add a container for that purpose and then, I begin coding the mobile design with all that in mind.

    You could check [Kevin Powell's youtube channel] (https://www.youtube.com/watch?v=HkX8eao2NZ0). I'm learning a lot from this guy!

    Have fun coding!!!

    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