How to enlarge image for mobile device

[newcoder1010]

Hi,

 

I have the below code for desktop version:

       .navbar .logo {    margin-right: -15px;    padding-left: 15px;    padding-right: 15px;}  

When I view the site in mobile, I want to make the logo 100% width. So, logo takes the entire screen.

  @media only screen and (max-width: 500px) {       .navbar .logo {       width:200%;       margin: 0px;       padding: 0px;}  }

It still does not work in mobile. Logo does not take entire screen. Can you please help?

 

 

 

 

 

[newcoder1010]

<div class="container">    <div class="navbar-header">        <a class="logo navbar-btn pull-left" href="/" title="Home">        <img src="http://xxx.com/sites/default/files/Charter.png" alt="Home">      </a>          </div></div>

[Ingolme]

You need to apply the style to the image, not the link, because the link is an inline element that can't have a width.

.navbar-header .logo img {  width: 100%;  height: auto;}

[newcoder1010]

I am using drupal-bootstrap theme. I tried your code it did not do anything. Image size remains same.

[dsonesuk]

add float: none; to anchor

@media only screen and (max-width: 500px) {       .navbarheader .logo {       float: none; /*added by dsonesuk*/       margin: 0px;       padding: 0px;}.navbar-header .logo img {  width: 100%;  height: auto;}  }

Edited September 2, 2015 by dsonesuk