All comments

• 

  Barney•370

  @waikooSubmitted over 2 years ago

  I found it challenging to find a logical place for the attribution. I enjoy taking a zoomed in look around the proportions and scales of things, but placing them on the canvas can get tricky. I may have found a working solution of simply using flexbox and centering things that way, with the html getting a 100% height, this works really well for single item presentations.

  When there's not too big of a visual difference in the mobile vs desktop view, it can get tricky sometimes to tell the difference but I enjoyed it very much.

  Any feedback is appreciated!

  

  Order summary component

  3

  60
  

  Jesse•110

  @vinshieldPosted over 2 years ago

  Hi Waikoo, to place the attribution neatly at the bottom center of the page, I usually set it's css position property to absolute, then I give it left: 0; right: 0; bottom: 0;

  Hope this helps!

  Marked as helpful

  1
• 

  Dragos Popescu•320

  @ospopSubmitted almost 4 years ago

  grid-template-areas did not respond to media query changes. However after switching from grid template to basic grid properties everything worked as intended.

  

  Responsive Testimonials (Grids & Sass)

  2

  10
  

  Jesse•110

  @vinshieldPosted almost 4 years ago

  Hi,

  I too faced challenges when trying to implement media queries while using grid-template-areas. It's possible to do though. Here's what my solution looked like:

  @media (max-width: 500px) { .container { margin: 20% auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "item1" "item2" "item3" "item4" "item5" ; } }

  You can see the full thing here: https://www.frontendmentor.io/solutions/responsive-testimonial-section-using-gridbox-cNd0zW1f-

  Cheers!

  1