cuysan Posted June 25, 2016 Share Posted June 25, 2016 I have an odd one I need help with. I have a number of images in the header area and have been unable to remove them from mobile or small screen display. I just want them to show on desktops but not on mobile view. Here’s the images in question: <div class="banner-area-wrapper"> <a class="navbar-brand" href="http://www.ibm.com/us-en/" target="blank"><img src="images/ibm-partner.png" alt=" " /></a><a class="navbar-brand" href="http://www.raps.org/" target="blank"><img src="images/RAPS.png" alt=" " /></a><a class="navbar-brand" href="http://www.medicaldevices.org/" target="blank"><img src="images/mdma.png" alt=" " /></a><a class="navbar-brand" href="http://advamed.org/" target="blank"><img src="images/AdvaMed.png" alt=" " /></a> </div> The logo I do want to keep in mobile view is: <a class="navbar-brand" href="index.html"><img src="images/logo3.png" alt=" " /></a> I’ve tried adding display:none rules to style as well as bootstrap.css. Can’t seem to find the right fix. Any help would be greatly appreciated. Don’t think I can add a display:none rule to img tag. Tried adding one to banner-area-wrapper with no luck. The bootstrap.css has over 6000 lines. Maybe I’m just not getting the right place? Really need some help. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 25, 2016 Share Posted June 25, 2016 Depending on bootstrap version. It used to be controlled for instance extra small mobile hidden-xs, small mobile hidden-sm and so on for -md, lg. Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2016 Share Posted June 25, 2016 Since you're using Bootstrap, just add the class .hidden-sm and .hidden-xs to the element you want to hide. http://getbootstrap.com/css/#responsive-utilities Link to comment Share on other sites More sharing options...
cuysan Posted June 25, 2016 Author Share Posted June 25, 2016 Appears to be the correct answer. Now if I can only find the right syntax? Not the strongest coder but can work with it. <a class="navbar-brand" href="http://www.ibm.com/us-en/" target="blank" .visible-md-block> .visible-md should block Small and Extra Small devices. By the way, no access to a mobile device (or service) so I'm using this to check / verify: http://mobiletest.me/ Link to comment Share on other sites More sharing options...
cuysan Posted June 25, 2016 Author Share Posted June 25, 2016 (edited) Wait, that looks like a css command. So I'm doing something wrong. Need the pro's....... I'll try that rule on the navbar-brand css. Will post update Edited June 25, 2016 by cuysan Link to comment Share on other sites More sharing options...
cuysan Posted June 25, 2016 Author Share Posted June 25, 2016 (edited) Bootstrap v3.3.5 (http://getbootstrap.com) OK, tried it on the navbar-brand within the bootstrap, no luck. I tried it as: .navbar-brand > img { .visible-md-block;} and with the asterisk: .navbar-brand > img { .visible-md-*;} Didn't do it so removed those rules and tried the below on the style.css @media only screen and (max-width: 640px) { #banner-area-wrapper { .visible-md-*; }} & @media only screen and (max-width: 640px) { #banner-area-wrapper { .visible-md-block; }} Edited June 25, 2016 by cuysan Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2016 Share Posted June 25, 2016 <a class="navbar-brand hidden-sm hidden-xs" href="http://www.ibm.com/us-en/" target="blank"> Link to comment Share on other sites More sharing options...
cuysan Posted June 25, 2016 Author Share Posted June 25, 2016 (edited) Nice! Thank you so much! It works when I minimize the browser window down to mobile size. The emulator at mobiletest.me, not so much. But I do believe this nailed it. Can't begin to thank you enough. By the way, this is a W3 template. I will be donating before I take the site live........ Love W3, has taught me so much. Edited June 25, 2016 by cuysan Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2016 Share Posted June 25, 2016 I don't believe the W3C or W3Schools has templates. The site you're getting the template from is not affiliated to the W3C or W3Schools. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 25, 2016 Share Posted June 25, 2016 W3.css has templates which IS part of w3schools. 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