Hi fellow campers! It would be great to have feedback on my “tribute to Stephen Hawking” page, which I have just finished. It’s meant to be simple and solemn … The main thing about it is the use of CSS grid and grid-template columns to resize and re-position the image and text for RWD.
Many thanks in advance!
1 Like
Is nice and responsive, good use of padding and margins. Only criticism is I don’t know what the media queries are there for. I commented them out and the page seemed to behave exactly the same.
1 Like
Simple and looks okay to me
post this link as a fullpage https://codepen.io/mcpop999/full/YvrBmd/
Thank you! I’ve changed the link.
The media queries alter the layout. On a large screen the image is to the left of the tribute text and takes up 2/3 of the available space. On a medium-sized screen it s still to the left of the text but only takes up 1/2 the width. On small screen the text is below the image.
I tried commenting out the media queries, and found that it doesn’t work like this anymore if they’re not there but does if they are as intended. Did it not work for you?
I’ll have another look in full page, I think the code editor was restricting the viewport width.
Apologies, I didn’t look closely enough at the min/max width values. The grid layout only comes into effect on large desktop monitors, I’m viewing through a laptop screen less than 1400px wide.
Ah! I wondered if that was what it was - Many thanks for looking at it!
Nice work, good use of media queries.
As for suggestions, I recommend you look up relative units like em and rem and see how they compare to px. I stopped using px awhile ago in favor of the responsiveness of em units when setting font-size and margin/padding.
Also it’s generally better to use class instead of id to style your html. As you make more progress through the curriculum you’ll see when to modify elements through id.
1 Like
Thank you, @ellereeeee. I often use em for font sizes but have always used px for padding and margins (don’t know why, no very good reason). I’ll try experimenting with the various units more following your suggestion.
1 Like
I would optimize the image as it’s ~6MB (which on my connection took a couple of seconds to load).
Very OT/sidenote: Fun stuff, we ended up in “best viewed with Internet Explorer” age again: “Test suites are currently optimized for Chrome. There are known issues that we are trying to work through to make these suites fully cross-browser compatible, but it is a work in progress. For the best user experience, please use Chrome until these issues are resolved. Thanks and Happy Coding!”
and web was supposed to be multi-platform and universal…
Very good point about the image - I just linked to it from another website as Codepen doesn’t allow image hosting. Good point about the non-compatibility of the test suites - very 1999!