How to shrink header grid on project, and 2 other questions

1: I have a black box outlining the grid box for the header. Right now its to big vertically. I need it about half that size so when you scroll it isn’t covering so much up. I know why its like that, its the logo. I am just unsure of the best way to fix it.

2: Also if anyone knows how to make my pricing boxes stay the same size when you go from 1440p to 1080p screens. It looks fine on 1440p, its longer than it is taller, but on 1080p its very long and skinny.

3: And a bonus if anyone knows how to keep the widths of them even, im using flexbox to make the three prices.

Thanks guys!

  1. Are you asking to shrink the height of the header? You can simply add a height property and set it accordingly to your preference in your #header.

  2. Look up Responsive Web Design Media Queries. This will explain how to set your CSS properties when someone look up your website from a tablet, phone, laptop screen, bigger screen, etc.

Well that was a simple fix. I wasn’t aware the height property worked on grids. That fixed from first and third issue.

For the second one ill dive deeper into doing a media queries for it, I wasn’t sure if there was a feature of CSS grids that could fix it.

1 Like