Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Monica Anderson
Monica Anderson
3,621 Points

I would like to ask a few questions regarding the webpage I am creating to make it more responsive.

Hello, The website is at www.monikaandersondesign.com. I want to ask just a couple questions.

  1. how can I make a media query so that the images line up 5 in a row horizontally on a desktop size browser.
  2. How can I make the text and nav links as well as the header image, h1 and footer stay a readable size on a mobile device.
  3. How come when I view the web page on my browser and resize it the layout is a readable size but when I do google chrome inspector or open it up on my phone the web page is scaled down and unreadable. A person helped me with my website earlier this week and did a great job but I want to code the website myself so I have a clear understanding of what I am learning. Obviously I am new in this field of responsive web design. I have created websites in the past but they were in 2010 prior to the responsive web design era. Thanks so much. I appreciate any suggestions you may have. Monika
Monica Anderson
Monica Anderson
3,621 Points

When I say images line up 5 in a row I mean the buttons like faucet, bathtub etc. Thanks

Monica Anderson
Monica Anderson
3,621 Points

I have added two media queries to my responsive.css style sheet and added this link to the head of my index.html file but for some reason it is not working.

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Very nicely designed site there :)

It loooks like you have the first question sorted there, they line up nicely horizontally.

With 2 you can control the size for smaller screens with a media query quite easily just as you would for desktop screens.

You can use static unit sizes or ones that change with the dimensions of the viewport. For example Viewport height or viewport width. VW or HV

Finally if your responsive web design isn't showing up properly on inspector in your mobile device you probably need to include your viewport meta tag. What this will do is force your device to scale so your media queries will kick in.

<meta name="viewport" content="initial-scale=1.0" />

Hope this helps

Monica Anderson
Monica Anderson
3,621 Points

Thanks so much I added this: <meta name="viewport" content="initial-scale=1.0" /> to the head of my html document and also created a separate css file called responsive.css and added that to the head of the html file.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Try this one if the other one hasn't worked :)

<meta name="viewport" content="width=device-width, initial-scale=1">

Actually I've just put your website through my phone and it does use the media queries correctly. :-)

Monica Anderson
Monica Anderson
3,621 Points

Thanks so much I added this: <meta name="viewport" content="initial-scale=1.0" /> to the head of my html document and also created a separate css file called responsive.css and added that to the head of the html file.

Monica Anderson
Monica Anderson
3,621 Points
Monica Anderson
Monica Anderson
3,621 Points

thanks so much (o; yes my cache is old on my phone how do I clear my cache?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Great glad it worked.

Sometimes simply refreshing your browser will help clear the cache so it displays properly. But you may have to go into your browser to clear browser history then it should work :)

Monica Anderson
Monica Anderson
3,621 Points
Monica Anderson
Monica Anderson
3,621 Points

Thanks so much also how do I get my social media icons and my copyright information to center? I tried text-align center and align-content center on my css and it does not seem to be working.