CODEWITHSUNDEEP
htmltwitter-bootstrap-3cross-browsermobile-safari
SkyWalker
SkyWalker

Reputation: 14307

How to make the logo fit in both PC and Mobile browsers?

I have a twitter bootstrap 3 application and the SVG logo looks great in Desktops but looks truncated in the mobile browsers e.g. iOS Safari.

My very standard code looks like this:

<!-- RD Navbar Brand-->
<div class="rd-navbar-brand brand">
   <a class="brand-name" href="/"><img src="images/logo.svg" height="100"></img></a>
</div>

Is there a way, for example, to reduce the logo size in case of mobile device detected?

Upvotes: 0

Views: 81

Answers (1)

Mahdi Hesari
Mahdi Hesari

Reputation: 337

you can use media queries like this:

    /* Large desktops and laptops */
    @media (min-width: 1200px) {
        .my-logo {
            width:300px;
        }
    }

    /* Landscape tablets and medium desktops */
    @media (min-width: 992px) and (max-width: 1199px) {
         .my-logo {
            width:250px;
        }
    }

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {
        .my-logo {
            width:200px;
        }
    }

    /* Landscape phones and portrait tablets */
    @media (max-width: 767px) {
        .my-logo {
            width:150px;
        }
    }

    /* Portrait phones and smaller */
    @media (max-width: 480px) {
         .my-logo {
            width:100px;
        }

    }

Upvotes: 1

Related Questions