Media Query working on desktop but not mobile.

Question

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)

<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; } }

Answer 1 · 2019-11-10T13:57:28Z

November 10, 2019 1:57pm

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! :)

Welcome to the Treehouse Community

Looking to learn something new?

Jessica Scott

Jessica Scott

Media Query working on desktop but not mobile.

Ray Thomas

Ray Thomas

1 Answer

Ray Thomas

Ray Thomas