CSS Grid. Im having trouble containing a title an image and a button


Joined
Oct 25, 2022
Messages
3
Reaction score
0
I'm using css grid,.... It all seemed so simple, but I spent hours yesterday trying to get a full page div to stick to viewport height when shifting a page between laptop and desktop, from screen to screen, on one there would be nothing hidden and no scroll bar on one screen, and then, in the next screen, there would be enough of the page hidden to be annoying and to create a scroll bar... I finally got it, I wanted a space for a title then an image under it, and then a button on the bottom, I assumed if I had a parent container for all three elements that they would stick together as I expanded minimally between the screens... this amount seems too small to be using media queries (yet), but, unfortunately, it hasn't worked as you can see in the Loom video they don't expand and contract in unison.....well they do but not the way I was expecting.
https://www.loom.com/share/66c54f7a4ab84a3cb663834f9aac10b7
Info including css in this google doc
 
Ad

Advertisements

Joined
Sep 12, 2022
Messages
30
Reaction score
0
Share your code, and let me try to help you. Off the top of my head, usually, when it comes to grid, you want to watch out for the grid template columns/rows, since this determines the output.
i.e
CSS:
.example {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

example 2
Code:
.example {
    display: grid;
    grid-template-columns: 1fr; /*default*/
}

example 3
CSS:
.example {
    display: grid;
    grid-template-columns: 70% 30%;
}

The same goes for rows. Only your code can shine more light on what's specific to your project.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top