Hi everyone, I just started freeCodeCamp and I’m really enjoying the experience. I need help making my Tribute Page responsive on mobile. I already browsed the forum and I made sure that I included the necessary meta tags–>meta charset=“UTF-8” and meta name=“viewport” content=“width=device-width, initial-scale=1”, the div class container-fluid, my image is responsive, and my margins use percentages. I was thinking that maybe my text is too big? Any help would be appreciated since this is my first post.
It looks fine to me. The only thing that may need some tweaking would be the blockquote content. It’s font size makes it hard to read, other than that it’s nice.
You may be interested in looking into CSS media queries and setting font-size of it (I think it’s .jumbotron p that makes it so big) to something lower for smaller widths. Other than that I did check it with viewport of 360px width and it looks fine.
If there are other things you find needing changes perhaps you should specify them here and I will try to give you hints on how to make required changes.
Hi pzaj2, thanks for the response! I was wondering how do you test if your web page is responsive on different devices? I went to codepen.io on my iphone and when I got to the editor view, it looks great! However; when I click action-full page it looks alot more messy(caption for thumbnail is too big and quote extends too far down the page.) I know you are supposed to develop the web page for mobile first and then take in account larger devices but how do you do that? Last question, how do I make my blockquote source have that font style, but not the quote itself? I think the font-size is the major problem and I will look into media queries.
Well, I typically (during development) just use browser - in Chrome you can turn on responsive view and keep stretching / shrinking your viewport, change pixel density, etc. It’s not always accurate, but gives a great overview. As for font style on blockquote and source, look at your HTML code, there’s an inner tag (cite) within it. So you can address it like this:
blockquote > cite {
// your rules
}
to only apply rules to author of the quote.