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 trialerdragerdragsson
Courses Plus Student 5,887 PointsTrouble with the images when making the browser smaller!
Hey when i maing my browser smaller , the images in the gallery moves to the right, and leaves a area with no images to the left.
i fixed it by, making the captions to the images smaller, but is there another way to fix this, because i want the whole line of text underneath the images. i have followed the videos, but i cant get it right,
this is how it looks like. http://imgur.com/6gD4WbL
(i didnt know how to upload pictures here, so i used imgur, i hope its okey)
14 Answers
Mikael Enarsson
7,056 PointsI think you can fix it using clear: left;
Edit: You need to do it with the nth-child
psuedo-class though, like so:
#gallery li:nth-child(3n) {
clear: left;
}
Or something to that effect.
erdragerdragsson
Courses Plus Student 5,887 PointsI have the code
#gallery li:nth-child(4n) { clear: left;
}
as in the video,
Mikael Enarsson
7,056 PointsThat is for the responsive style, no? Meaning that it will only take effect when (if we have the same specs) the page width is more than 480px.
Also, nth-child(4)
means that every 4th item will clear on the left, which isn't what you want if you want 2 columns.
All that being said, I made some research here, and noticed that I have made a mistake, and that the correct form is
#gallery li:nth-child(2n+1) {
clear: left;
}
That fixes some problems I've had with my own page up till now, so thank you for making me look into that ^^
Mikael Enarsson
7,056 PointsOh, I should probably mention (if you don't already know) that you have to clear this command in responsive.css before you add the 3 column rule:
#gallery li:nth-child(2n+1) {
clear: none;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
erdragerdragsson
Courses Plus Student 5,887 Pointsi did exactly as the code you wrote, but it still doesnt work, i still have the same problem when my browser is small, i did the browserstack simulation with an iphone 5 and the images was placed as in the picture.
i have no idea what to do, how do i send code in a code format as you did? so you can see my codes.
Mikael Enarsson
7,056 PointsThat would be very helpful. There are instructions in the Markdown Cheatsheet under the Add an Answer field, but basically you type three grave accents (`) followed by the language you want formatted, and you close by typing three more accents ^^
erdragerdragsson
Courses Plus Student 5,887 Points@media screen and (min-width: 480px) {
/**************************************** TWO COLUMN LAYOUT *****************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**************************************** PAGE: PORTFOLIO *****************************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(2n+1) {
clear: none;
}
#gallery li:nth-child(3n+1) {
clear:left;
}
/****************************************
PAGE: ABOUT
*****************************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 660px) {
/****************************************
HEADER
*****************************************/
```
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 10px solid #599a68;
margin-bottom: 65px;
}
/****************************************
PAGE: FOOTER
*****************************************/
}
erdragerdragsson
Courses Plus Student 5,887 Pointsokey, it looka kinda wierd, i didnt know how to set the (`) i hope you can read it:D
Mikael Enarsson
7,056 PointsYes, I can read it fine, with a little bit of headache XD Anyway, this is only your responsive.css, not your main.css, right? You have to add
#gallery li:nth-child(2n+1) {
clear: left;
}
either in your main.css or before any of your media queries in responsive.css
I hope that helps, otherwise I can take a look at your main.css as well ^^
erdragerdragsson
Courses Plus Student 5,887 PointsMAIN CSS, STYLING OF THE WEBSITE
***********************************************/
body {
font-family: 'Lora', serif;
}
/*Makes the whole div section, have max-width of 940px, with margin 0 , auto and a padding of: 0, 5% */
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
/*makes the underline disapear, and while clicking, you get pointer*/
a {
text-decoration: none;
cursor: pointer;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/****************************************
HEADING
*****************************************/
/* margin moves it 30px to the bottom*/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
/*Makes the text in the header align center, and with margin 0*/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Sansita One', cursive;
margin: 15px 0;
font-size: 2.0em;
font-weight: normal;
line-height: 0.8em;
text-shadow: 1px 1px 1px black;
}
h2 {
font-size: 1em;
margin: -5px 0 0 7px;
font-weight: normal;
text-shadow: 1px 1px 1px black;
}
/****************************************
NAVIGATION
*****************************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 900;
padding: 15px 10px;
}
/****************************************
FOOTER
*****************************************/
footer {
font-size: 1.2em;
text-align:center;
clear: both;
padding-top: 50px;
color: #989898;
}
.social-icon {
width: 35px;
height: 35px;
margin: 0 5px;
}
/****************************************
PAGE: PORTFOLIO
*****************************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.8em;
color: #898989;
}
.images {
border-radius: 5px;
}
/****************************************
PAGE: ABOUT
*****************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100px;
}
/****************************************
PAGE: CONTACT
*****************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/****************************************
COLORS
*****************************************/
/* Change the body background to white, and the text to grey*/
body {
background-color: #fff;
color: #999;
}
/* Changing the headers background to green and the border color to dark green*/
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile*/
nav {
background: #599a68;
}
/* LOGO TEXT*/
h1, h2 {
color: #fff;
}
/*Change the link colors to Green*/
a {
color: #6ab47b;
}
/* nav visited*/
nav a, nav a:visited {
color: #fff;
}
/* selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
} ```
erdragerdragsson
Courses Plus Student 5,887 Pointsi put the code you wrote over the media code, and now it works! thank you,
can you explain what the
gallery li:nth-child(2n+1) {
clear: none;
}
gallery li:nth-child(3n+1) {
clear: left;
does, i kinda get what they do, but not fully, so if you have time to explain, so i can learn, it would be awesome:)
and why i have to add the
gallery li:nth-child(2n+1) {
clear: left;
before the media. // kind regards ; Erdrag
Mikael Enarsson
7,056 PointsGlad you got it working ^^
I'll try, though I still find myself occasionally confused by them.
For an example, I'll use the code we have been working with, mare or less:
#gallery li:nth-child(2n) {
background: #ff0000;
}
This means that, for li
elements that are child elements of a #gallery
, every second will have a red background:
<ul id="gallery">
<li></li> # 1
<li></li> # 2 red background
<li></li> # 3
<li></li> # 4red background
<li></li> # 5
<li></li> # 6 red background
</ul>
If you change the 2 to a 3, every third item will have a red background:
<ul id="gallery">
<li></li> # 1
<li></li> # 2
<li></li> # 3 red background
<li></li> # 4
<li></li> # 5
<li></li> # 6 red background
</ul>
If you do nth-child(2n+1)
, 1 is the offset:
<ul id="gallery">
<li></li> # 1
<li></li> # 2 ordinarily, the background would be red here, but
<li></li> # 3 <-- because of the offset, this background is red
<li></li> # 4
<li></li> # 5 red background
<li></li> # 6
</ul>
I hope that this makes it somewhat clear, but otherwise you can read more about it here.
The reason that you have to add the code before the media query is that it's a conditional statement, kind of. That is, The code that comes after @media screen and (min-width: 480px)
will be processed only if the width of the browser window is at least 480px
. You want the rule no apply is all cases where width
is smaller than 480px
, so you must add it before the query. You can read more about it here.
I hope that this was helpful, and if you have any other questions, don't hesitate to ask ^^
erdragerdragsson
Courses Plus Student 5,887 PointsThanks alot!, theres one thing you can help me with, if you got time ofcourse.
im trying to make a border at the bottom of my page, it works for the home page "index.html" but the other pages it sets the border to the center,
heres the code
body {
height: 100%;
border-bottom-color: #599a68;
border-bottom-style: solid;
border-bottom-width: 20px;
} ```
Mikael Enarsson
7,056 PointsThis kind of works:
html {
min-height:98%;
border-bottom-color: #599a68;
border-bottom-style: solid;
border-bottom-width: 20px;
}
I'm pretty sure that it isn't a perfect solution, but maybe it's good enough for the moment? ^^
erdragerdragsson
Courses Plus Student 5,887 Pointsthanks it works now, but why do i have to select the html tags, why doesnt the body tags work, because every page has the body tag.
Mikael Enarsson
7,056 PointsHonestly, I'm not sure.