Search code examples
htmlcsspositionzurb-foundation

Adding a partner logo to the footer of my website on the same line as the rest of my partner logos?

I'm trying to add a new partner logo to the footer of my website but it keeps appearing on the next line, I was wondering if you guys could help me out with getting it on the same line as the others?

HTML (I've removed the links and alt tags for ease of readability):

<section class="bottom-logo">
    <div class="row">
         <div class="large-12 columns">
            <ul class="footer-logos">
                <li><img src="" alt="" />  </li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /> </li>
                <li><img src="" alt="" /> </li>
                <li><img src="" alt="" /> </li>
                <li><img src="" alt="" /></li>
                <li><img src="" alt="" /></li>
            </ul>
        </div> 
    </div>
</section>

CSS:

.bottom-logo{min-height: 150px;}
.bottom-logo img{
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    opacity: 0.5;
    margin-top: 30%;
    margin-left: auto;
}
.bottom-logo img:hover{
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    opacity: 1;
}

.footer-logos li{
    list-style: none;
    display: inline-block;
    margin: 2% 3.5%;
}

Thanks!

Solution

  • Change CSS to this

    .footer-logos li{
list-style: none;
display: inline-block;
margin: 2% 3.5%;
Width: 10%;
}

.footer-logos li img {
 Width: 100%;

}

    Play with the width percentage on the li to suit your needs.