Help with Grid and Media Queries please

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:

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


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

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?

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

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

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

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;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.