Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Jessica Scott
Jessica Scott
30 Points

Media Query working on desktop but not mobile.

Hi! So I finished the CSS and HTML basics and I'm very new at this. I am just having trouble with my floating divs looking nice on a mobile screen (creating this on codepen.io). On the desktop the divs will resize when the media queries max-width rule applies and it changes the divs width to 100%. but when I check it on mobile they just stack on top of each other and sit the the left, i assume because I floated them all to the left? The other issue is that even if I set the width in the media query to something other that 100% it still takes up the whole screen when it's applied. ...Okay, here is my code, I know it's messy and needs a lot of fixing, but it's my first site I'm making solo!

HTML: (codepen does the <!DOCTYPE html> stuff for you)

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

<body>

<h1 class="title">STRIVE</h1>
<h2 class="title">To Be Better</h2>

<div class="main-content"> <p class="intro">This page is designed to help you in all aspects of life. How to be better for youself, for others and for the earth. </p> </div> <div class="secondary-content"> <div class="eco"> <h3>Eco Friendly</h3> <p>Learn how to look after the earth for our future generations.</p> </div> <div class="charity"> <h3>Charity</h3> <p>Learn how you can help people in need with a small amount of time or money.</p> </div> <div class="health"> <h3>Food</h3> <p>Learn about what food lifestyles might fit you and keep up to date with food news.</p> </div> <div class="exercise"> <h3>Exercise</h3> <p>Learn how exercise can improve mental and physical health and find out what works for you.</p> </div> </div>

</body>

CSS: *{ box-sizing: border-box; }

body { background: #FADBD1; font-family: trebuchet ms; line-height: 1.5; color: white; }

h1 { text-align: center; height: 50%; padding: auto; font-size: 5em; background: #F5CAC1; max-width: 300px; width: 80%; margin-top: 40px; margin-bottom: 20px; border: 8px solid;

} .title { margin-left:auto; margin-right: auto; line-height: 1.2; }

h2 { text-align: center; font-size: 4em; margin-bottom: 0px; margin-top: 0px; }

.intro { font-size: 1.5em; line-height: 1.2; margin-top: 40px; }

.main-content { text-align: center; font-size: 1.5em; font-weight: 500; padding: 50px; }

.secondary-content:after { content: ""; display: table; clear: both; }

h3 { text-align: center; font-size: 1.75em; }

.eco, .charity, .health, .exercise { width: 19%; float: left; border: solid 8px; background: #F5CAC1; padding: 5px 40px; height: 270px; margin: 3%; overflow: hidden; min-width: 300px; }

@media (max-width:960px){ .eco, .charity, .health, .exercise { width: 100%; margin-left: auto; margin-right: auto; } }

Change @media (max-width:960px){ .eco, .charity, .health, .exercise { width: 100%; margin-left: auto; margin-right: auto; } } to...... @media(max-width: 960px) { .eco, .charity, .health, .exercise { width: initial; margin: 0 auto; } }

I think this is the functionality you're looking for. Hopefully this gets you to the next step. good luck! :)

1 Answer

Change @media (max-width:960px){ .eco, .charity, .health, .exercise { width: 100%; margin-left: auto; margin-right: auto; } } to...... @media(max-width: 960px) { .eco, .charity, .health, .exercise { width: initial; margin: 0 auto; } }

I think this is the functionality you're looking for. Hopefully this gets you to the next step. good luck! :)