Help with editing CSS grid for a small size

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?

1 Like

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

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