Block Certain Images in Header from Mobile View HTML5

[cuysan]

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.

[dsonesuk]

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.

[Ingolme]

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

[cuysan]

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/

[cuysan]

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

[cuysan]

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

[Ingolme]

<a class="navbar-brand hidden-sm hidden-xs" href="http://www.ibm.com/us-en/" target="blank">

[cuysan]

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

[Ingolme]

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.

[dsonesuk]

W3.css has templates which IS part of w3schools.