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
ibbhfsmeaf
4,568 PointsHelp me add media queries to my website
I have changed the code on my website for mobile view. If you make your browser as small as it can get, that is my desired result.
Now I am having a problem with the media queries. For some reason no matter what I do, it wont change anything on the site. I've tried many different methods of media queries that I found on Google, because my previous method (the method that I learned on here), isn't working, but even those aren't doing anything.. I didn't include the responsive.css on my site because it isn't having any effect at all.
website: http://desimara.com
I want to make it so that if it is in either tablet view or desktop, the portfolio page splits the images into two columns rather than just one.
Also, I want the text in the about page to adjust so that the text isn't all on their own respective lines, but stay in the paragraph form they are in in the mobile view, except for maybe getting a tad bit wider.
If anyone can help me with the media query code and the meta code, and tell me exactly what line to put the meta code in my .html so that it actually takes effect, I'd greatly appreciate that. I deal with the CSS.
Thanks!
5 Answers
Leanne Thng
13,824 PointsIt goes inside the Head tag. I am not sure if it matters where it is placed in relation to the other tags within the head section.
Leanne Thng
13,824 PointsHey,
For the media query in the HTML I have been using
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and that has been working for me.
I am just learning this myself but hope that helps!
ibbhfsmeaf
4,568 PointsI have that same code in my .html files. In the media queries I made, I did change them to pixels rather than percentages. But still nothing changed at all.. its as if I didn't even write any media queries. That is more or less what my question was about. Can't seem to find a solution.. maybe I'm doing something stupid that I'll find later, because that's what usually ends up happening.
Thanks!
Philip Gales
15,193 PointsThe "How to Make a Website" course would be highly recommended for you. Primarily because they make a website with exactly what you are looking to do.
For the portfolio page.
.portfolioImages {
width: 80%;
max-width: 45%;
margin: 2.5%;
float: left;
}
@media screen and (max-width: 660px) {
.portfolioImages {
width: 80%;
max-width: 95%;
margin: 2.5%;
float: left;
}
On the about page, remove the <br> as that will for the text to a new line and just make the text fit into a <div> tag that has like 50% width so the text doesn't span the whole width of the browser.
Oh, and try and stay away from pixels by either using a % or "em" when talking about text sizes. The % helps to ensure it is responsive for all screen sizes and the "em" helps people who have poor vision to increase the size of the text using their web browser.
Leanne Thng
13,824 PointsYes I just finished the "How to make a Website" course and they go into portfolio page layout and media queries so may be good to look at or revisit.
ibbhfsmeaf
4,568 PointsUnfortunately I can't go back to any courses as my account is on pause (free trial ended and cannot afford a subscription at the moment). But I will try out your code. Thank you both!
Philip Gales
15,193 Points<body>
<header>
<h1><a href="index.html" class="noDecoration"><Strong>desimara</Strong>.com</a></h1>
</header>
<nav id="main-navigation">
<ul>
<a href="#" class="noDecoration"><img src="img/up.png"></a>
<a href="portfolio.html" class="li-a noDecoration"><li>Portfolio</li></a>
<a href="about.html" class="li-a noDecoration"><li>About</li></a>
</ul>
</nav>
<section id="section-one">
<div id="aboutDiv">
<h3 class="aboutDiv-headers">Who Am I?</h3><br>
<p>Hi, my name is Lansana Camara. I am 19 years old. I was born in Guinea, West Africa, and came to America at the age of four. I was raised in the mid-west and have since lived all over the east coast. I am a second year student at The Pennsylvania State University, currently undeclared but looking forward to a major in IST (Information Science and Technology), with a minor in Computer Science. I was intrigued by computers beginning at the age of 14, when I was phished for my account on an online MMORPG. I learned my first programming language in high school. As of now, I know 5 computer languages, and learned them in this order:</p>
<ol>
<li><strong>C++</strong></li>
<li><strong>Java</strong></li>
<li><strong>HTML</strong></li>
<li><strong>CSS</strong></li>
<li><strong>JavaScript</strong></li>
</ol>
<p>Web development is something that has always sparked my interest. So I decided to start learning how to create websites. This is my very first website. I started learning web development on 3/10/2015.</p>
<p>Here is some information about the languages used to create the front end side of websites, and how they combine together to make something truly remarkable.</p>
<h3 class="aboutDiv-headers">HTML</h3>
<p>HyperText Markup Language (HTML) is used for creating and visually representing a webpage.
HTML adds "markup" to standard English text. "Hyper Text" refers to links that connect Web pages to one another, making the World Wide Web what it is today. By creating and uploading Web pages to the Internet, you become an active participant in the World Wide Web. HTML supports visual images and other media as well. HTML is the language that describes the structure and the semantic content of a web document. Content within a web page is tagged with HTML elements such as <img>, <title>, <p>, <div>, <picture>, and so forth. These elements form the building blocks of a website.</p>
<h3 class="aboutDiv-headers">CSS</h3>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>
<h3 class="aboutDiv-headers">Front-end Development</h3>
<p>Front end development is the development of those elements of a website that the customer sees and interacts with directly. It is a combination of programming skills (knowing which program to choose) and aesthetics (understanding element arrangements on the screen, the color and font choices).</p>
</div>
</section>
<footer><p>© 2015 desimara. Designed by Lansana Camara.</p></footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
Is your about page with the <br> tags removed which will help with the responsiveness and having all the skipped lines. Everytime you use a <p> tag, it starts a new line
ibbhfsmeaf
4,568 PointsThanks! I forgot I had the breaks in there.. but my media queries still wont work!
Its not that I'm not getting the desired result, its that they aren't working at all whatsoever. It's as if I don't have any media queries at all. What does he say in the "How to Make a Website" course about where to put the
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the .html file? I remember him saying has to be before something but after something, or am I wrong? Maybe mine is misplaced..
ibbhfsmeaf
4,568 Pointsibbhfsmeaf
4,568 PointsHmm, maybe you're right. Something else must be wrong then.. I'll find it eventually. Thank you both, again.