Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS help
Tagged: css
- This topic has 8 replies, 2 voices, and was last updated 11 years, 4 months ago by petertravis.
-
AuthorPosts
-
December 21, 2012 at 4:42 am #6607petertravisMember
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
December 21, 2012 at 6:35 am #6612RiavonMemberHi,
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
December 21, 2012 at 7:02 am #6619petertravisMemberHappy 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
December 21, 2012 at 7:18 am #6623RiavonMemberYou'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
December 21, 2012 at 7:27 am #6626petertravisMemberThanks 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
December 21, 2012 at 7:41 am #6629RiavonMemberHi 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
December 21, 2012 at 7:48 am #6631petertravisMemberYay! 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
December 21, 2012 at 7:54 am #6633RiavonMemberTerrific, 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
December 21, 2012 at 8:36 am #6636petertravisMemberYes, I know ... I'm already hooked. Still, it beats cigarettes for an addiction.
-
AuthorPosts
- The topic ‘CSS help’ is closed to new replies.