Results 1 to 3 of 3

Thread: Responsive adaptions

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default Responsive adaptions

    Hey all,

    In the header of my site http://storiesalongtheway.com you can see the logo left and text on the right, nicely aligned.
    When responsive, the logo becomes smaller, but the text stays on the right and is too high, so it doesn't align anymore.
    How can I make the text appear below the logo in responsive, both centered ?

    This is the current css:

    Code:
    #menu{padding:0 90px 2px 298px;float:left;}
    #menu li{display:inline;list-style-type:none;}
    #menu li a{display:block;float:left;font-family:Tahoma, sans-serif;font-size:11px;color:#E8F6FF;font-weight:bold;text-decoration:none;background-position:top left;background-repeat:no-repeat;margin:0 1px 0 0;height:31px;line-height:31px;text-align:center;}
    .logo{width:35.96%;height:27.03%;float:left;}
    .logo img{margin: -5px}
    .buttons{width:64.04%;height:27.03%;float:left;}
    .buttons p{float:left;font: italic 1.30em "Baskerville", Georgia, Times, serif;color:#777;padding:5px 10px 0px 5px;text-align:right;}
    #main{width:100%;margin:0 auto;padding:0px;overflow:hidden;background-color:#fff;margin-bottom:50px; }
    #mainleft{width:100%;margin:0 auto;padding:0px;float:left;overflow:hidden;}
    Thanks for your help.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,009
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Hi chechu,

    I think I'd be tempted to use device size media queries to change the CSS at common break-points : http://css-tricks.com/snippets/css/m...ndard-devices/

    Then you can use .logo:after { content:"\A"; } to add a line break after your logo.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    chechu (01-13-2013)

  4. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    807
    Thanks
    87
    Thanked 2 Times in 2 Posts

    Default

    Exactly what I need.
    Thanks a lot !

Similar Threads

  1. Can Step Carousel be used in a 'Responsive' design?
    By samsen in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-02-2012, 09:57 PM
  2. Responsive script for carousel
    By veeps in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-11-2012, 04:58 PM
  3. Replies: 0
    Last Post: 02-24-2012, 12:39 PM
  4. Accordion Script with Responsive Headers Help
    By guppyfisherman in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 01-08-2009, 06:29 PM
  5. Help !! Glossy Accordion Menu with responsive headers
    By tbellamy08 in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 05-08-2008, 04:04 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •