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
Kevin Miner
Courses Plus Student 2,831 Points[SOLVED] Style the Portfolio Module of How to Make a Website Course: Seeing One Column of Images rather than Two.
I am only seeing One Column of Images rather than Two in the unordered list with id of "gallery." Not sure where I botched this but have looked at it for too long. I am at the point where I am only seeing what I want to see.
Here is index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Northside Wholesale Liquor| Proprietor</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Kevin Miner</h1>
<h2>Student Rendition</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="Image/numbers-01.jpg">
<img src="Image/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="Image/numbers-02.jpg">
<img src="Image/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="Image/numbers-06.jpg">
<img src="Image/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="Image/numbers-09.jpg">
<img src="Image/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushes.</p>
</a>
</li>
<li>
<a href="Image/numbers-12.jpg">
<img src="Image/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.mtb.uscourts.gov"><img src="Image/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://www.mtd.uscourts.gov"><img src="Image/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Kevin Miner.</p>
</footer>
</div>
</body>
</html>
Here is main.css file:
/*********************************
GENERAL
*********************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
/* Keeps entire image in element when browser is re-sized downward */
img {
max-width: 100%;
}
/*********************************
HEADING
*********************************/
#logo {
text-align: center;
margin: 0;
}
/* Changa One from Google fonts is preference, and san-serif is default backup if Google Fonts not available */
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
/* ems are a relative size element and stands for "M" - an M relative to 16 pixels */
font-size: 1.75em;
font-weight: normal;
line-height:0.8em;
}
h2 {
font-size: 0.75em;
margin -5px 0 0;
font-weight: normal;
}
/*********************************
NAVIGATION
*********************************/
NAV {
text-align: center;
padding: 10px 0;
margin 20px 0 0;
}
/*********************************
FOOTER
*********************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px
color: #ccc;
}
/*********************************
PAGE PORTFOLIO
*********************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: bdc3c7;
}
/*********************************
COLORS
*********************************/
/* site body */
body {
background-color: #ffffff;
color: #999999
}
/* set header to green */
header {
background-color: #6ab47b;
border-color: #599a68;
}
/* set nav background on mobile devices to green */
nav {
background-color: #599a68
}
/* logo text */
h1, h2 {
color: #ffffff
}
/* set link color */
a {
color: #6ab47b;
}
/* set nav colors to white */
nav a, nav a:visited {
color: #ffffff;
}
/* set color for currently select and/or hovered nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Thank you for taking a look.
Cheers, Kevin Miner
Yan Liu
10,552 PointsHi try this.
in main.css,
section li{
list-style:none;
float:left;
width:45%;
margin:2.5%;
background: #f5f5f5;
}
Kevin Miner
Courses Plus Student 2,831 PointsI did modify the folder name containing images from img to Image for no particular reason. Everything is okay except only seeing one column. I have tried Google Chrome 41.0..., Mozilla Firefox 36.0.1, and Internet Explorer 11.0...
Also, I did try the suggestion of associating the float with the list item by referencing section li {...}) rather than the gallery id of the unordered list, i.e. #gallery li {...}. That worked and I get it, but I like the granularity of being able to reference the unordered list.
Still not working!!! ???
Robert Richey
Courses Plus Student 16,352 PointsAs I mentioned, your code produces two columns for me, so the problem may be somewhere else. Consider downloading the project files from this video and continuing from there.
Kevin Miner
Courses Plus Student 2,831 PointsThanks Robert. Will do....
Kevin Miner
Courses Plus Student 2,831 PointsAnother interesting twist... First, renamed the original index.html and main.css files and also renamed the Image directory to img. Then, downloaded and unzipped the project files to the local local drive. Next, copied the unzipped index.html and main.css files from the local drives to root and css directories respectively in Treehouse workspace. Ran the code and it came up in single column. Then I ran the code directly from the unzipped directory on the local drive and it came up in two columns. Finally, copied my code down to the local drive. My code also produced two columns when executed from the local drive. ???
Robert Richey
Courses Plus Student 16,352 PointsI'm grasping at straws here, but that sounds like browser cache was using your old css file.
Consider creating a new workspace and upload the project files to it.
Kevin Miner
Courses Plus Student 2,831 PointsHi, Robert. I thought of that as well and should have included that in my previous comment. I cleared the Google Chrome cache (all options marked) "from the beginning of time" between each load... I guess I will just carry on and see where it leads.
Kevin Miner
Courses Plus Student 2,831 PointsSuccess!!! Had the copies on local hard drive. Deleted Treehouse workspace created for this module. Created a new workspace. Unloaded images and code into new workspace. Website up with two columns... Thanks for your input Robert.
Robert Richey
Courses Plus Student 16,352 PointsAwesome! I'll mark this thread as solved.
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsHi Kevin,
I added
cssafter the backticks to give that part of your code syntax highlighting.With your code, I'm getting two columns. The only thing that really jumps out at me is the folder name
Imagesused in the path. This normally defaults toimgunless you changed it yourself.Do all of your styles appear broken, or is everything OK except for only seeing one column? What browser are you using?