Help with Grid and Media Queries please

[Plee]

Hi There!
I am trying to copy Ecwid: #1 Free and Easy E-commerce Shopping Cart Solution - Try Ecwid Today! as an exercise and I am having some issues setting the grid layout.

I am using the grid area but for some reason i can’t get the same look.

May I ask you to show me how would you set The Grid layout to get the same look

I use VS Code - Have a look the code on Codepen: https://codepen.io/LeePaolo/pen/KKovWaW

I wish you somebody can help me to understand what to do.

Best
P.

[Plee]

This is the layout grid I am trying to re-create Imgur: The magic of the Internet

[bappyasif]

i dont know what you mean by not getting same look as you are expecting, but when i trigger ‘<=700px’ i can see ‘grid’ system is there and effectively working what exactly is not ‘appearing’ to be as expected from that scenario?

[Plee]

Hi there!
thanks for your message.

I am basically re-creating this module Imgur: The magic of the Internet and can’t really figure out how to get the same proportion.

I have updated codepen with the code - may you have a look and tell me your opinion?

Thank you
P.

[bappyasif]

shared link for your ‘source’ site is not working on my browser for some reason!!

@Plee

can’t really figure out how to get the same proportion.

which ‘div’ element is not getting same proportion?!

[bappyasif]

check your media queries:

css @media (min-width: 900px) {
    .service-container {
        display: grid;
        grid-template-columns: 10px 1.2fr 1.2fr 2fr 10px;

probably you’re looking for somethign more ‘fluidity’ in that like this media query that you defined

@media (min-width: 700px) {
    
    .service-container {
        display: grid;
        grid-template-columns: 1fr 1fr;