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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Wayne Myles
Wayne Myles
1,044 Points
Posted by Wayne Myles
Wayne Myles
1,044 Points

Why in mobile view is my gallery is not in two columns?

Hi there

I have been styling my gallery in the tutorial. When I shrink the browser the images scale but they stay in one column. I have looked closely at the code. The responsive side is working but the images don't seem to be floating left. They stay in a column.

Any ideas?

rmgvqegryz
rmgvqegryz
3,970 Points

Have you set the image to max-width 100% or have you set the width of your list element of your images to 45%? It's just a guess, but could you please past your code please?

4 Answers

rmgvqegryz
rmgvqegryz
3,970 Points

Margin of your gallery list item should be 2.5% on right and left side. Your images are: 2 times 45% = 90 % And margins: 4 times 2.5% = 10 % All together makes 100% width of your screen. If you use 2.5em, you should indeed find some issues.

Wayne Myles
Wayne Myles
1,044 Points
Wayne Myles
Wayne Myles
1,044 Points

Hi there

Thanks for you reply

My image is set to:

img { max-width: 100%;

}

My gallery style is:

gallery {

margin:0; padding:5%; font-size: 0.75em; color: #bdc3c7;

}

gallery li {

float:left; width 45%; margin: 2.5em; background-color: #f5f5f5; color: #bdc3c7;
}

You can see the gallery is floated left. The html is is correct the images are scaling to the browser. Just not sitting next to each other in two columns.

Thanks

rmgvqegryz
rmgvqegryz
3,970 Points
rmgvqegryz
rmgvqegryz
3,970 Points

Past your code please by doing the flowing... Go to workspace of your code. Press snapshot at the upper right corner of the screen. Save a snapshot of your .html and .css file, or whatever you want. Finally past the url link of your snapshot here. ;)

Wayne Myles
Wayne Myles
1,044 Points
Wayne Myles
Wayne Myles
1,044 Points

Hi there

Thanks for your help so far. Problem solved. I found a old thread relating to this issue copied in the code and the page responded as it should in the video. After a closer analysis of my "#gallery li" I realised that a colon was missing from width see below:

gallery li {

float:left; width 45%; margin: 2.5% }

Rookie error :)

Thanks for your assistance.

rmgvqegryz
rmgvqegryz
3,970 Points

You're welcome. And if you ever cross a problem again, don't hesitate to ask and make a snapshot of your code in workspaces. ;)