How to make an image appear in mobile version only

HTML & CSS
1

Hi from nearly dark about to rain York, UK…

logo in footer for mobile only
logo in footer for mobile only1356×742 49.8 KB

I’d like my Artemis logo to appear in the footer for the mobile version only (see above illustration). But am i right in thinking I’d need to add a media query in the CSS? That bit i get but not sure how to get the image coded correctly if that makes any sense…

Thanks in advance,
David

2

Yes a media query is what is needed. Start by applying a display: none; style to the image. In the query you would use display: inline-block; or display: block; when the media query is active for mobile which will show the image.

.artemis-logo-mobile {
  display: none;
}

@media screen and (max-width: 992px) {
  .artemis-logo-mobile {
    display: inline-block;
  }
}

Here if the width is less than 922px, then the style will apply and display the image which has the class “artemis-logo-mobile”.

Enjoy! :slight_smile:

3 Likes
3

It you are wanting to show something in a completely different element then you have little choice (responsively) but to have two copies of the image. One in the footer (perhaps smaller for smaller screens) and the original in the sidebar for larger screens.

The image in the footer should be give a class and hidden for large screens by default in your css (display:none). Then when your smaller screen media query kicks in you can show the footer image by setting it to display:block.

I’m not a fan of duplicate content but the odd image is ok.

To some degree it also depends are on what your plans are for smaller screens? What are you doing with the sidebar and large logo etc?

Also don’t confuse mobile and desktop as all you are essentially interested in is the space available for your design whether on a desktop, laptop, tablet or phone. It’s all about the space available and you can check all those on the desktop by just closing the browser window until something doesn’t fit and then throw in a media query at that point and make it better.

2 Likes
4

Thank you so much your solution worked :slight_smile:

5

Thank you for the heads up :slight_smile: