Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a logo responsive in Bootstrap

    Hi, my site Domestic & Office Cleaning Services | The Traditional Cleaning Company is responsive apart from the logo which because of the design I needed to fix where you can currently see it. Unfortunately when you view the site on a phone the logo covers the nav. In order to get it to float over the banner and header area I had to do this:

    .graphic-logo{
    position: absolute;
    top:10px;
    left:0px;
    z-index:1001;

    }
    .row{
    position:relative;
    }

    How do I keep it fixed where it is but become responsive? Do I add class="img-responsive" to the style sheet somewhere?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    I'd make some smaller logos and call them in when the width shrinks.
    Put the src 's in a responsive media querys.
    It's best to design for the smallest device first and change things as the width increases.
    Not sure why you needed to use position: absolute; Did you try to position with margins and padding? If it's because of the slider could you make it's z-index -1?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Dec 2013
    Posts
    14
    Thanks
    1
    Thanked 1 Time in 1 Post
    Put into your css
    Img {
    Max-width:100%
    }
    It should do the trick or media queries and smaller images, which is more work but definitely worth the extra effort in the long run as the above method can sometimes have unexpected results. Hope this helps


  •  

    Posting Permissions

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