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

CSS

Posted by Naroa Luque
Naroa Luque
1,364 Points

Responsive design: stacked buttons

Hi,

I'm designing a website which's interface is five image buttons:

<div class="container clearfix"> 

    <div class="grid_3">
    <form action="#">
        <input type="image" src="img/SobreNosotros.png" alt="Sobre nosotros"         onMouseOver="this.src='img/SobreNosotros(rollover).png'" onMouseOut="this.src='img/SobreNosotros.png' ">
    </form>
    </div>

    <div class="grid_3">
    <form action="#">
         <input type="image" src="img/MenuPrecios.png" alt="Menu y precios" onMouseOver="this.src='img/MenuPrecios(rollover).png'" onMouseOut="this.src='img/MenuPrecios.png'">
    </form>
    </div>

    <div class="grid_3">
    <form action="#">
        <input type="image" src="img/SeleccionSidras.png" alt="Seleccion de sidras" onMouseOver="this.src='img/SeleccionSidras(rollover).png'" onMouseOut="this.src='img/SeleccionSidras.png'">
    </form>
    </div>

    <div class="grid_3">
    <form action="#">
         <input type="image" src="img/CalendarioHorarios.png" alt="Calendario y horarios" onMouseOver="this.src='img/CalendarioHorarios(rollover).png'" onMouseOut="this.src='img/CalendarioHorarios.png'">
    </form>
    </div>

    <div class="grid_3 omega">
    <form action="#">
        <input type="image" src="img/ComoLlegar.png" alt="Como llegar" onMouseOver="this.src='img/ComoLlegar(rollover).png'" onMouseOut="this.src='img/ComoLlegar.png'">
    </form>
    </div>

I'm trying to make it responsive and I have set up the grids in percentages:

.grid_1 { width: 4.8%; }
.grid_2 { width: 11.6%; }
.grid_3 { width: 18.4%; }
.grid_4 { width: 25.2%; }
.grid_5 { width: 32%; }
.grid_6 { width: 38.8%; }
.grid_7 { width: 45.6%; }
.grid_8 { width: 52.4%; }
.grid_9 { width: 59.2%; }
.grid_10 { width: 66%; }
.grid_11 { width: 72.8%; }
.grid_12 { width: 79.6%; }
.grid_13 { width: 86.4%; }
.grid_14 { width: 93.2%; }
.grid_15 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12
.grid_13
.grid_14
.grid_15 {
    margin: 0 2% 1% 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 90%;
    max-width: 1000px; 
    margin: auto;
}

The problem is that when I scale down the website, the buttons stack on top of each other instead of going underneath. Can this problem be fixed with a fluid grid or do I need to wait until I learn how to implement jQuery?

Thank you in advance for any help!

5 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Use a media query at the point the content screws up.

Can you put the code into codepen.io and then people can look at it in action.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Something like this?

[http://cdpn.io/wqvab]

I think you need to look at using svg for your images so they scale properly.

Naroa Luque
Naroa Luque
1,364 Points
Naroa Luque
Naroa Luque
1,364 Points

Yes, more-less. Like this:

http://cdpn.io/pcmra

I have never heard of svg. I made the icons in illustrator and then exported them to .png.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Naroa Luque -

I have never heard of svg. I made the icons in illustrator and then exported them to .png.

Check out this video on saving images for the web in the new Illustrator course. Then follow this tutorial on adding SVG graphic to a web page.

Naroa Luque
Naroa Luque
1,364 Points
Naroa Luque
Naroa Luque
1,364 Points

Hi, thank you for your help but I ended up fixing it in another way:

Instead of having:

<input type="image" src="img/SobreNosotros.png"...

I wrote

<image src="img/SobreNosotros.png"...

And the in my CSS style sheet wrote img {max-widht=100%;}

Now the buttons scale down without stacking on top of each other.