Show a picture exclusively on mobile devices

I'm currently working on an email design where I want to display one image only when the email is viewed on a mobile device, and another image when viewed on a desktop.

I've managed to hide the desktop image when viewed on mobile using CSS, but now I need help figuring out how to achieve the same effect in reverse.

If anyone has any suggestions or solutions, I would greatly appreciate it.

Here is the CSS code that I am currently using:

@media screen and (max-width: 600px) {

 .img-max {
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
 }

 .max-width {
   max-width: 100% !important;
 }

 .mobile-wrapper {
   width: 85% !important;
   max-width: 85% !important;
 }

 .mobile-padding {
   padding-left: 5% !important;
   padding-right: 5% !important;
 }

 /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }

}

And here is the HTML code for displaying the images:

<img class="mobile-show" border="0" height="50" src="images/logo.svg" style="display: block;" width="250">

<img class="mobile-hide" border="0" height="50" src="images/logo.svg" style="display: inline;" width="100">
htmlcss

Answer №1

Looking to add a second media screen:

@media screen and (min-width: 600px) {

  /* These classes can be used to hide content on mobile devices */
 .mobile-hide {
    display: none !important;
 }

}

Answer №2

Start by including the following meta tag for mobile device support if it's not already there:

  <meta name="viewport" content="width=device-width, initial-scale=1">

Next, utilize media queries to achieve your desired outcome.

@media screen and (max-width: 600px) {
.mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }
}
.mobile-hide {
    display: block;
 }
 .mobile-show {
    display: none;
 }

Answer №3

@media screen and (max-width: 600px) {
.mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }
}
.mobile-hide {
    display: block;
 }
 .mobile-show {
    display: none;
 }

Answer №4

It is important to always hide your mobile image, except when viewing on a mobile device. To do this, simply add the following CSS code to your image: display:none. This will ensure that your image does not appear on desktop screens, but will be visible with the help of media queries in your CSS.

<img class="mobileShow" border="0" height="50" src="images/logo.svg" style="display: none;" width="250">

Answer №5

 .desk-hide {
    display: none !important;
 }
 .desk-show {
    display: block !important;
 }

@media screen and (max-width: 600px) {

 .img-max {
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
 }

 .max-width {
   max-width: 100% !important;
 }

 .mobile-wrapper {
   width: 85% !important;
   max-width: 85% !important;
 }

 .mobile-padding {
   padding-left: 5% !important;
   padding-right: 5% !important;
 }

 /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }

}
<img class="mobile-show desk-hide" border="0" src="https://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="422332322e276f362d37212a6f2b212d2c02706c322c25">[email protected]</a>" style="display: block;">
<img class="mobile-hide desk-show" border="0" src="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="display: inline;" />

You have implemented two classes specifically for managing mobile layout behavior. To achieve the same effect for desktop screens, you should include desktop size rules prior to the @media section. This way, the default screen size will follow the desktop styling rules, with the @media rules taking effect when the screen width drops below 600px.

Answer №6

To display different image sources based on screen size, you can implement the picture tag as shown below:

<picture>
    <source srcset="images/banner-mobile.png" media="(max-width: 768px)">
    <img src="images/banner.png">
</picture>

Answer №7

Do you consider tablets to be mobile devices, or are you solely focused on mobile phones? With the advanced technology in today's smartphones and tablets, relying solely on a simple media query like:

@media screen and (max-width: 600px) { }

In my opinion, the best approach is to utilize Javascript or PHP (such as this fascinating PHP class github.com/serbanghita/Mobile-detect) to identify the device being used and then apply the appropriate style.

This method is lightweight, dependable, and provides valuable data about your users' devices, including resolution, pixel depth, and more. It's beneficial not only to know the type of device but also to tailor your content based on individual user preferences.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extracting ng-template Content into a Variable from the Source

I am trying to save the contents of my template into a variable. Here is how my current code looks: HTML <script type="text/ng-template" id="a.html" src="templates/a.html"></script> JS vm.template = $templateCache.get('a.html'); c ...

javascripthtmlangularjsangularjs-routing

Issues have arisen with jQuery methods functioning properly within the Owl Carousel

My owl carousel displays rotating boxes that each contain a button. When I click the button in a box, I want to switch a class on a div within that same box. This functionality works perfectly until I wrap it in an owl carousel and initialize it. Once th ...

jqueryhtmlowl-carousel

Comparison of button text alignment: stacking vs inline placement

I currently have a button on my webpage labeled "Learn More." Unfortunately, the text on the button is not lining up as it should. Instead of flowing in a line, the text seems to be stacking on top of each other. The HTML code for the button is included ...

htmlcsstwitter-bootstrap

Encountering a problem with the CSS locator select-react

I'm encountering an issue with a CSS locator. The parent has a unique label, which allows me to target the specific child element that I need. @FindBy(css = "[data-qa='select-Seller'] .select__value-container") Webelement seller; public Web ...

javacssselenium

Tips for preventing the div from disappearing when using rotateY(90deg)

My website features a div element with an animation that gives the illusion of it being flipped over. <div id="wrapper"> <div id="content"> Some content </div> </div> To achieve this effect, I use the jQuery plugin ...

javascriptjqueryhtmlcss

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

jquerycss

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

What is the best way to retrieve the href and id values dynamically from a card in React JS?

Hello everyone, I'm new to stackoverflow and still in the process of learning how to code. Please bear with me if this question sounds like a newbie one. My question is about having dynamic values for href and id when mapping data using axios to crea ...

javascriptjqueryhtmlreactjs

What is causing the animate callback to not properly wait for the completion of the animations?

Both animations are triggered simultaneously (sometimes even multiple times).... <div id="home-bt" class="button"></div> <div id="about-bt" class="button"></div> <div id="beauty-bt" class="button"></div> <div id="pam ...

javascriptjqueryhtmlcss

Angular Components with a Distorted Background

Having a little design issue with CSS Adjustments. I successfully skewed the backgrounds of all sections and elements, but towards the footer, I'm having trouble joining the article and footer as I want it to. Can anyone please help me figure out how ...

htmlangularjscss

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to transfer data between HTML files using Python?

Is it possible to pass values from one HTML file to another and then retrieve those values in the second HTML file? This is the code I am currently using: with open('page.html', 'w') as myFile: myFile.write('<html>&apo ...

pythonhtml

"Utilize Django to store and edit the values inputted in

Using MySQL as my database, I have implemented a rich text editor with Bootstrap. I am looking for a solution to store the content and uploaded images from the text editor, but so far I haven't found one. Here is a snippet of my template: {% extends ...

pythonhtmlmysqldjangotwitter-bootstrap

JavaScript encountered an uncaught error: TypeError - it is unable to read the property 'addEventListener' of null

I'm currently working on adding infinite scrolling functionality to my webpage. I found a simple JavaScript code snippet and tried to implement it as a test example, but unfortunately, it's not working correctly. My understanding of how JavaScrip ...

javascripthtml

"Upon initial activation, the CSS animation will loop twice before coming to a stop

Is there a way to create a navigation bar that starts off transparent at the top of the page and then becomes opaque as you scroll down? I have tried implementing an animation for this effect, but it seems like the animation triggers twice when it should o ...

javascripthtmlcss

Selenium throws errors when elements become stale or are not clickable

I am a beginner when it comes to coding and I recently started it as a hobby. Please bear with me if my terminology is not entirely accurate. I have written a script that navigates to a webpage, continuously refreshes it until a certain element (currently ...

pythonhtmlselenium

Tips for ensuring uniform height across all input fields

I have created a contact form using HTML and CSS. Each input field has a small tag below to display errors, causing the adjacent field to shift downward if an error occurs. To view the live form, click here * { margin: 0; padding: 0; -webkit-box- ...

htmlcss

Setting the opacity of an image will also make the absolute div transparent

I currently have an image gallery set up with the following structure : <div class="gallery"> <div class="message"> Welcome to the gallery </div> <img src="http://placehold.it/300x300" /> </div> Here ...

cssimageopacityabsolute

"Enhance Your HTA Webpage with a Hover Zoom Effect on CSS Tables

Greetings and thank you for taking the time to read my message. I am relatively new to this, so please bear with me if things seem a bit disorganized. I have constructed a table and am attempting to implement a hover effect to zoom in on a specific cell w ...

csshoverzoominghtml-tablehta

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box