Menu
for some this may seem very easy, and from what I have written I seems like it would do what I want it to, but sadly that isn't the case I have two images each image will be shown depending on the screen size, so for the first one in the HTML I have placed hidden-md, hidden-sm, hidden-xs which would give me the impression It will only show on large screens, the second one I only want to be visible on the tablets/mobiles so I have assigned the visible-sm, visible-md and hidden-lg but when I re-size the browser the first image doesn't dis-appear when I minimize down to a tablet size, however it does dis-appear when minimizing the browser down to a mobile device size, can anyone spot what I've done wrong?
<a class="navbar-brand hidden-md, hidden-sm, hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a> <a class="navbar-brand hidden-lg, visible-sm, visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a> 
241
To hide an element in a responsive layout, we need to use the CSS display property set to its "none" value along with the @media rule. The content of the second <p> element having a "hidden-mobile" class will be hidden on devices smaller than 767px.
To hide elements simply use the . d-none class or one of the . d-{sm,md,lg,xl}-none classes for any responsive screen variation.
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
Use the d-none class to hide an element. Use any of the d-*-none classes to control WHEN the element should be hidden on a specific screen width.
You have commas in your class. Remove these, and it should work as you expect.
<a class="navbar-brand hidden-md hidden-sm hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a> <a class="navbar-brand hidden-lg visible-sm visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
