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
John Levy
1,451 PointsProblems with changing from desktop to mobile screens
I have been having issues with adding media queries. The mobile versions are fine (which I included six media queries from 320px-700px. It is once I add the desktop version the problems arise. The code is going to be different for the desktop version from the mobile version so I did "display: none;" for all the code that is only for the desktop version on the mobile screens. This worked fine. The problem is once I get to the desktop version (screen width 768px). When I do "display: none;" for all the mobile parts on the desktop version some of the parts disaper and stay on the mobile version but a lot (such as the <h> and .paypalbutton1) also causes them to be removed from mobile version and I dont understand why. Right now all the mobile code falls below the desktop code on the desktop screens because as I said once I delete the mobile parts on the desktop screens it also causes it to be deleted from the mobile version. The CSS desktop code is on lines 0-92. The CSS mobile code is on lines 94-305. I used two screen sizes for an example that has both the desktop and mobile code on it, one desktop version (screen size 768px) lines 309- 402 for the desktop version and lines 405-601 for the mobile version. I also have one mobile version (screen size 600px) lines 604-665 for the desktop version and lines 667-863 for the mobile version. I have attached the code below- http://codepen.io/Johned22/pen/vKzAyd What is the reason for the issues I am facing? Thanks in advance
2 Answers
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsHello,
Maybe if you approach your the layout of your css a bit differently you will find it easier. The way that I learnt off treehouse (which works in my projects) is to write your css first to work on the mobile screen size (mobile first approach). You then add media queries to alter any code for a tablet size and then a larger screen size. I often create a base css file for the mobile screen size and then a nav css file for any media queries. Here is an example of what one of my css files looks like. This approach should help solve your propblems
Base css
-
{
box-sizing: border-box; }
header{
height: 100px;
padding: 5px 5px;
margin-bottom: 5px;
}
/* Search bar styles*/
search-bar {
text-align: center; margin-top: 50px;
}
input[type=text] { width: 200px; height: 22px; border: none; border: 2px solid lightgray; border-radius: 6%; }
input[type=text]:focus { outline: 0; }
/* Photo container styles*/
photo-container ul {
list-style-type: none;
}
.photo {
width: 200px;
height: 200px;
margin-bottom: 30px;
padding: 5px;
margin-left: 14%;
}
nav css
@media screen and (min-width: 720px) {
input[type=text] {
width: 240px;
}
photo-container{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
photo-container {
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
column-gap: 10px;
}
photo-container {
max-width: 800px;
}
.photo { width: 150px; height:150px; }
@media screen and (min-width: 1020px) {
photo-container{
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
photo-container {
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
}
.photo { width: 200px; height: 200px; }
photo-container {
max-width: 980px;
display:block;
margin:auto;
}
#photo-container ul { padding-left: 0; }
}
John Levy
1,451 PointsThanks for your answer. Yes I started with mobile. The problem is the page is different for the desktop and as I mentioned in my initial question when I try to hide this content on the desktop screens it also hides the content on the mobile screens