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

Design

Posted by Unsubscribed User
Unsubscribed User
8,167 Points

Change HTML markup for smaller screen size

Hey I am working on a site for someone who wants it responsive. With the layout he wants for the desktop version there is a table with 1 row and many columns full of pictures so it scrolls horizontally. For the mobile version I want the table to instead have many rows instead of columns so it vertically scrolls. So i gotta change the html markup as well as the CSS to implement this design. How can I do that so when you access the site from a mobile phone it brings in the mobile HTML with the mobile CSS?? I already know how to bring in the mobile CSS but not sure how to do it for HTML....Hope that makes sense..

any help would be greatly appreciated!!

Thanks,

Justin

2 Answers

Nikolaos Papathanassopoulos
Nikolaos Papathanassopoulos
10,322 Points
Nikolaos Papathanassopoulos
Nikolaos Papathanassopoulos
10,322 Points

Just out of the blue: (didnt test it, try it yourself ;) )

/* Layout */

.verticalscroll{
width: 100%;
display: none;
}

.horizontalscroll{
height: 100%;
display: block;
}

@media screen and (max-width:400px) {

.verticalscroll{
width: 100%;
display: block;
}

.horizontalscroll{
height: 100%;
display: none;
}

}

Add both classes with their specified properties and values to every element you want. If the screensize is under your defined max-width it will change the layout to vertical scrolling.

example:

<div class="verticalscroll horizontalscroll">
//content
</div>

Tell me if it works ;) ~ Nikos.

Alexander Smith
Alexander Smith
2,769 Points
Alexander Smith
Alexander Smith
2,769 Points

If you're using a responsive gird this should be pretty simple. Just put each image in it's own grid div(or whatever element you want I guess).

For an example look at the image section at in this framework http://amazium.co.uk/. I only chose that because I love the framework but gives you a good way to do it imo and will work for any kind of content.

Edit: and if you use amazium it will resize the images before stacking them on top of each other. So you may have to make your screen window size pretty small to actually see what I'm talking about.