I’m working on making my very simple tribute page more responsive. I’ve added a media query to adjust the size of my page when the page gets larger however I’m having some trouble centering my content. The result I’m going for is when the screen size gets to a certain size (500px) the content stops expanding and instead centers the content in the middle of the page. However what I’ve tried (and commented out in the code) doesn’t give me the result I’m looking for.
https://abovewisdom.github.io/tributepageplato/
Any ideas?
Hello there,
Would this be close to the result you’re after?
https://numerous-flare.glitch.me/
(Inspect/edit code here)
You’ll quickly note that I haven’t used your grid structure to achieve this, and admittedly, that’s (1) because I’ve only used grid once, so I’m likewise learning those ropes, and (2) because I couldn’t quite orientate myself within the code you’ve written, which seemed somewhat complex (but again, this is coming from someone not very familiar at all with either grid or flexbox).
So besides commenting out your body sections and some of your header properties, what I principally inserted was this, under your media query:
.allin{ max-width: 600px; margin: 0 auto;
But also, I just noted that you had that <div class="allin"> tag located outside of your HTML body element.
And if it helps, I’d perhaps just observe that it’s not necessary, actually, to duplicate all of your CSS for every media query you implement; rather, you only need to write CSS for those properties that you wish to differ between different screen sizes, if that makes sense.
Also, when I used CSS grid for the first time, I found that this site helped, if you still wanted to use that approach: gridbyexample.com
D.
Thanks Denis, this is the result I was looking for. I was using grid because I’m trying to understand how the layout works but this gives me a good baseline to work against.
Also helpful to learn that media queries only need to include properties that will be different from the original.