Help with editing CSS grid for a small size

Beginners
1

Hello all,

I am evaluating Pingrow and I like the flexibility to play with both visual elements and HTML/CSS. I am following the tutorial Summer Nights CSS Grid Tutorial, currently working on video 9: making the page responsive. I followed the instructions and I do have two rules(copies of the original body) for displays larger than 1200px and 992px.They both have their media query setup. I am performing the changes in the body rule (with no media query) in order to adapt this view to screens smaller than 992. However, when I select this body rule and change the columns in the grid, the change is reflected in all the sizes. See attached picture. Any ideas?

cssgrid
cssgrid1817Ă—852 429 KB

1 Like
2

welcome,

i’ve not worked thru that tutorial, but i can tell from the screen shot you have more than one view of the page going at the same time.

I generally don’t work that way, and here’s why: You need to be hyper aware of which view of the page is currently the “active” one in the sytle and property tabs. It’s super easy to lose track and end up gaslighting yourself.

What i do is use Ctrl-1 thru 6 hotkeys too change the viewport size or just grab the edge of the view and resize it. I wish there were a way to make fine adjustments with the cursor arrow keys but you have to make the changes in the text box showing the dimensions if you want it down to the pixel.

hope this helps

3

Thanks for the tip. I will try again following it.

4

I have exactly the same problem, and I am trying to follow the same tutorial closely. What am I doing wrong?

5

I no longer have the tutorial files, but what I did is to place media queries at both sides of the screen limits. I mean, for the medium size screen, I created the min and max breakpoints, instead of setting only the maximum or the minimum. Hope it helps

6

I’m not sure what’s exactly the issue, but I faced similar ones. After a lot of analysis, realised that the media queries has to be in proper order. body grid without media on top, then the next size media query, then the next one… check my answer here - Summer Nights Tutorial: Missing Grid

When you get the order wrong, then it might work different…

Another thing is check if you page view is in “fit” or “100%”… if it’s fit, then it will not break on smaller size, keep it 100%…

7

Akayy is right. I moved the the body rule above the other two media inquiry rules and it seems to work properly.

Thanks all. Finally I can move on.

Pinegrow-screenshotpng
Pinegrow-screenshotpng1492Ă—1268 361 KB