newcoder1010 Posted September 1, 2015 Share Posted September 1, 2015 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? Link to comment Share on other sites More sharing options...
newcoder1010 Posted September 1, 2015 Author Share Posted September 1, 2015 <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> Link to comment Share on other sites More sharing options...
Ingolme Posted September 1, 2015 Share Posted September 1, 2015 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;} Link to comment Share on other sites More sharing options...
newcoder1010 Posted September 2, 2015 Author Share Posted September 2, 2015 I am using drupal-bootstrap theme. I tried your code it did not do anything. Image size remains same. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 2, 2015 Share Posted September 2, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now