CSS help

This topic is: not resolved

Tagged: 

This topic contains 8 replies, has 2 voices, and was last updated by  petertravis 1 year, 4 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #6607

    petertravis
    Participant

    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

    #6612

    Riavon
    Participant
    Post count: 95

    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

    • This reply was modified 1 year, 4 months ago by  Riavon.
    • This reply was modified 1 year, 4 months ago by  Riavon.
    #6619

    petertravis
    Participant

    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

    #6623

    Riavon
    Participant
    Post count: 95

    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

    #6626

    petertravis
    Participant

    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

     

    #6629

    Riavon
    Participant
    Post count: 95

    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

    #6631

    petertravis
    Participant

    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

    #6633

    Riavon
    Participant
    Post count: 95

    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

    #6636

    petertravis
    Participant

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

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘CSS help’ is closed to new replies.