CSS help

[petertravis]

Hi

I'm using eleven40 and am also in the process of learning CSS. I'm trying to create three boxes on a page aligned horizontally and have used the css from studiopress homepage to try to figure out how to do this. (I hope this isn't frowned upon - please let me know if it is).  If you go to the link below you'll see it works - hopefully. When I look at it on my mobile, a Galaxy S2, the blocks are responsive and sit one below the other. However, the  'block left' (the first one on the phone)  is not in line and sits to the right of the others and disappears off the edge of the screen. Also there is no padding between the boxes so they sit right on top of  each other. I'd be grateful if someone could explain what it is I'm missing.
http://www.web202260.clarahost.co.uk/post-2/

Many thanks

[Riavon]

Hi,

You need to add media queries to your stylesheet to call different styles for the smaller screen sizes. For example, to resolve the problem you mention here, try adding this to our stylesheet:

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

.three-reasons-1 { margin: 0 10px;}

}

---

Twitter: @riavonentprises

[petertravis]

Happy Christmas to you Ria! That has sorted out the alignment issue straight away.  Any chance you could tell me how to solve the padding problem to create a little space between the boxes at this 480  resolution?

Thanks

Pete

[Riavon]

You're welcome. To increase the vertical spacing at that size, try adding a bottom margin to the box style:  margin: 0 10px 10px;

Merry Christmas!

---

Twitter: @riavonentprises

[petertravis]

Thanks Ria.  It worked between the top box and the middle box. Trying to be logical I added this to get the same effect on the second (middle) box:

{

.three-reasons-2 { margin: 0 10px 10px;}

}

However, this hasn't created any space between the middle and bottom box.  Have I done something wrong?

Peter

 

[Riavon]

Hi Peter,

I can't see where/how you've added the style for box 2 to your stylesheet, but I can tell you that you must be sure that each style declaration from opening bracket to closing bracket must be placed within the media call brackets. To ensure that all three of your reason boxes are displayed in a consistent manner on smaller screens/mobile devices, try to apply the same style to all 3 boxes for this media call, like so:

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

.three-reasons-1,
.three-reasons-2,
.three-reasons-3 {

margin: 0 auto 10px 10px;

}

}

---

Twitter: @riavonentprises

[petertravis]

Yay! It works like a charm. Many thanks for being so helpful Ria! I think I'll request a CSS book for Christmas from the kids/Santa.

Peter

[Riavon]

Terrific, glad it worked for you.

If you want to learn CSS, I'd highly recommend reading anything and everything you can from Eric Meyer who is an internationally recognized expert on CSS. He is where I started learning on my own, years ago. In addition, there are several terrific resources you can tap, both online and off.

However, I must warn you: CSS is highly addictive!  😉

---

Twitter: @riavonentprises

[petertravis]

Yes, I know ... I'm already hooked. Still, it beats cigarettes for an addiction.

[Author]

Posts