Skip to content
Submitted 27 days ago

Testimonials Project using Grid

#sass/scss
id-nynt•80
@id-nynt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I get to know more use of grid and layout. Hope that I can apply them faster next time.

What challenges did you encounter, and how did you overcome them?

There are 2 biggest challenges in this project:

  1. Layout using grid: In the beginning, I intended to divide the layout in columns then in rows and then in columns. But then I found out the use of column-span in grid, which made it more efficient.
  2. The quotation decoration: I spent quite much time to make it behind the text
What specific areas of your project would you like help with?

I still don't really understand the position in relative and absolute meaning. And is there a better solution to make a background with icon on it? I inserted the icon in HTML and styled it in CSS. Any suggestions are welcomed. Thanks a lot!

Community feedback

  • P
    Jonatan Samuelsson•490
    @jonatan-samuelssonPosted 26 days ago

    Nice work. Some suggestions/comments:

    ##Html structure

    • Your elements are in the wrong order. This makes them appear in the wrong order in the layouts

    ##Grid layout

    • The tablet-sized design does not match the design spec. All your cards are the same size, when two of them are supposed to be one-column only
    • Responsive and fluid sizes are generelly a good idea, but at some screen size transistions your site looks awkward. (example: 780-800 pixels wide) -Grid-tips: To make your layout work better, start by ordering the elements in the intended order. Then look into using grid-areas to position your cards where they need to be for the different sizes.

    ##The decorator image You specifically requested help on this, so here goes:

    • The decorative image moves around alot when the container changes in size. Notice also that it is visible even at mobile size, which is not the case in the design spec.

    • You can solve this by making it a background image. The following properties are useful:

    • background-image: url(images/image.jpg)

    • background-size: [two values for x and y size resepctively]

    • background-position: left [insert value] top 0

    • background-repeat: no-repeat

    Marked as helpful
    0
    id-nynt•80
    @id-nyntPosted 25 days ago

    @jonatan-samuelsson Thank you so much for your suggestions! I will try to apply those and improve my solution

    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