I’ve just finished my tribute page (https://codepen.io/zara-knox/pen/yLerKPa) - the first thing I’ve ever written. I would love some advice on making it responsive.
I’ve added in some media queries - I need to set them to be responsive on smaller devices, as the pixel dimensions are not quite right at the moment. Do you just use the width dimensions given for mobile?
Also, when I open my page in debug mode, I see that the image is overlapping the background colour (under “main”) when I decrease the width of the page - see pic.Screen Shot 2020-08-02 at 22.41.19|690x290 . I can’t for the life of me see how to fix this.
I would appreciate any help/advice you could give!
Your page actually has pretty good responsiveness, you just need to fix the image and accompanying caption. The hint for doing that is don’t set a width on the <figure> because then it won’t narrow as the view port narrows. You can set a max-width on it if you like to keep things from getting out of control.
The other thing I would suggest is to make the h1 font size a little smaller at narrower widths so the last name has more room to fit. But other than these two things the responsiveness seems to be fine. Did you have something else in particular you were concerned about?
There are a couple of things to know when making a page responsive.
First you will want to utilize relative units more than absolute units in your css (google search them). If you set your outermost element for a given section to a relative unit you can then keep everything within that section relative to that outer element while keeping it properly displayed on most devices.
The outer element is referred to as a wrapper or container depending on usage. So if you set the wrapper to a width of 90vw (view-port width) then all elements inside of that can use a percentage for width.
Here is a pen with an example of that. The wrapper has a width of 90vw then everything contained in that wrapper <div> uses a percentage. So the .content1 div is actually 70% of 90vw which keeps it placed where I want it on most every screen. Some sizes will differ which is where media queries come in.
The .image img class width is set to 30% of it’s wrapper (90vw). I also set the wrapper height to 100% which allows it to grow and shrink vertically to always keep it wrapped around its contents.
Just keep that stuff in mind when creating your pages.
Next thing is that you should keep all of your media queries together. Don’t break them up piece by piece like you have it. Most of your page can be written outside of media queries and still be responsive to mobile devices. For the few items/styles that just won’t work properly on both large and small screens then you can add a media query and make the exact adjustments you need.
As far as your photo goes you have it set to 42rem which is why it’s so big on small devices. Instead of using rem use width and set to to either a vw of the view-port or % of the div that it is contained in.
I always start with the smallest screen, e.g. a very narrow smartphone; because then I have to think deeply about a good layout so that my content fits into the screen; it’s also simpler to start, because I mostly use a column layout; I do this mostly with pen & paper
then I think about the visual changes for the next bigger screen; this is mostly about white space, font size and some small changes in the layout
That is an amazing tip about the figure element! Thank you so much.
I was worried that I was using far too many media queries as a crutch, instead of making my page responsive without the need to tack them on. I’ve had a go at using viewport to cut down on them. https://codepen.io/zara-knox/pen/PoNoqor
Thank you so much for the great tips - it really helped
I’ve heard that this is best practice. Thank you for this. I’m saving all your feedback to bear in mind for the future! I’ve had another stab here. https://codepen.io/zara-knox/pen/PoNoqor
Hi! Oh my goodness, I can’t thank you enough for this wonderful tutorial. I remember touching upon vm in the basic CSS section of the curriculum, but your explanation is fantastic for beginners.
I used media queries as a bit of a crutch, I think! I saw them on an example tribute that FCC linked to, and thought “Well, if it’s good enough for them…” However, I agree that adding them on should come second to making a page responsive from the get go.
I’ve saved your explanation to draw upon in the future. I’ve had another go at this, removed media queries, and tried to let vw do the talking this time around. I hope it’s a step closer to a responsive page! https://codepen.io/zara-knox/pen/PoNoqor
Again, thank you for your invaluable help on this.
