Hey everyone. My tribute page has passed 10/10 tests. It looks okay on my desktop but terrible on mobile. I was experimenting with adding some media queries and it didn’t help much, but still feel a bit lost as far as those are concerned so I’m not surprised.
Any advice on that topic and general feedback on the project would be greatly appreciated.
With the media queries at max-width 300px, you don’t have much space to work with. I’d get rid of the borders around the text and make the font smaller. Make the images full width at that size, and make sure to shrink the video width too
Thanks for your input! I played around with the media query earlier and also had it at 450 or so and it didn’t seem to make a difference. Not sure why?
Do you mean to shrink the videos and make the text smaller using a media query? Or make it smaller for how it will look on both desktop and mobile?
Using a media query
The desktop view is fine, but the width is too small for the text in the mobile view
The videos break out of the frame when you shrink the window’s width
Well with the media queries you have, the only one that makes a substantial difference right now is
#tribute-info { width: 150px; }
Wow it looks totally different on my phone. The pictures in the main are the only elements that look resized in any way.
I’m so confused. I just used the chrome developer tool for simulating what the page would look like on an iPhone X and it looks like what you posted. But when I log onto my tribute page on chrome
on my iPhone X it looks like the screenshots I posted above. Why would it be different?
The device mode doesn’t actually simulate the device. It is just an approximation.
You can use something like lambdatest which gives you some free time each month. There are other platforms, but most are just a one-time trial.
Edit: I would also suggest adding the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
On Codepen, click the Settings button, on the HTML tab click “Insert the most common viewport meta tag”
