Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

how to hide image in mobile view WordPress

How to Hide Images in Mobile View on WordPress 

Written By: author image Stacey Corrin
author image Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: Turner John
reviewer image Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Are you looking for an easy way to hide an image in mobile view on your WordPress website?

Displaying every design element of your website on mobile screens can make the viewing experience cluttered and overwhelming. When that happens, it’s harder for visitors to find what they’re looking for, and can even cause them to abandon your site.

Wouldn’t it be great if you could “turn off” certain design elements just for mobile viewers?

This article will show you how to hide images on mobile in WordPress, enabling you to offer a better user experience to website visitors.

Why Hide Image in Mobile View on WordPress?

A cluttered mobile website can turn off your visitors, but that’s not the only reason to hide content on mobile devices.

Sometimes, you may want to reach desktop visitors with a targeted offer. In that case, you’ll want to hide your promotional images from mobile visitors so you don’t target them accidentally and skew your results.

Another reason for hiding images is they may be too big to display on mobile screens. A huge hero image may look great on a desktop, but it can take up a lot of valuable space on mobile devices, in which case, the best solution is to hide it.

How to Show and Hide Image in Mobile View on WordPress

The solutions for hiding images on mobile screens may seem complex for users unfamiliar with coding languages. A quick Google search reveals instructions for writing custom CSS, div classes, and all manner of technical jargon.

Don’t worry. You won’t need any technical expertise for the methods we cover below. All you need is a WordPress plugin, a WordPress website, and the ability to follow some easy steps.

Method 1: Hide Image in Mobile View on Website

We’ll use a powerful WordPress plugin to hide images in mobile view for the first method.

hide image in mobile view with SeedProd WordPress website builder

SeedProd is the best website builder for WordPress. It lets you create WordPress themes, landing pages, and responsive layouts without writing code.

It includes hundreds of premade templates, and you can customize every inch of your website with the visual drag-and-drop page builder, blocks, and sections. You can also use Device Visibility settings to hide specific content on mobile and desktop views.

SeedProd also offers built-in modes, such as coming soon, maintenance mode, 404 page, and login page. You can turn each mode on and off with one click, allowing you to hide your website from the public while working on its design.

Follow the steps below to hide images in mobile view on your WordPress website.

Step 1. Install and Activate SeedProd

First, click the button below to get your copy of SeedProd.

Note: To use SeedProd’s website builder feature, you need a SeedProd Pro license.

After downloading the plugin, install and activate it on your WordPress site. You can follow this guide on installing a WordPress plugin if you need help.

Next, go to SeedProd » Settings and enter your license key.

enter your license key

You can find your key in your SeedProd account dashboard under the ‘Downloads’ section.

Find your SeedProd license key

Click the Verify Key button to unlock your SeedProd license, then move on to the next step.

Step 2. Choose a Website Template

The next step involves creating a custom WordPress theme. That will allow you to use SeedProd’s ‘Device Visibility’ settings to show and hide different content on desktop and mobile.

Go to SeedProd » Theme Builder and click the Themes button to choose a website template.

add a theme template

Many themes are available for various industries and website types, including eCommerce, blogs, portfolios, etc. 

Once you find a theme you like, hover over it and click the checkmark icon to import it to your site.

Choose a WordPress website template

You’ll now see the different parts that make up your WordPress theme.

WordPress theme files

Typically, you’d need to customize these manually with code, but with SeedProd, you can visually edit each part of your website with the drag-and-drop page builder.

To customize any part of your website, hover over a theme template and click the ‘Edit Design’ design link. For this guide, we’re starting with the homepage.

edit homepage design

Step 3. Customize Your Website Design

You’ll see SeedProd’s visual page editor when you open a theme template. It has blocks and sections on the left for adding custom content and a live preview on the right.

SeedProd visual page editor

You can click any element to see its settings and change the design and layout. For example, the headline element allows you to edit the content, alignment, heading level, etc.

Customize website headline

It’s also easy to add new elements to your design. Simply drag a block from the left and drop it onto your live preview.

Add a countdown timer block

We used the ‘Countdown’ block in this example. Countdown timers are an excellent way to add urgency to your site and encourage visitors to act before missing out.

Customize coundown timer content settings

Like all SeedProd blocks, you can click it to:

  • Change the timer type
  • Adjust the timer alignment
  • Add a custom message
  • Redirect users when the timer ends
  • Change the timer size

You can also click the ‘Templates’ tab to choose a different style quickly.

Choose a countdown timer template

Step 4. Hide Website Images on Mobile with Device Visibility

Hiding images in mobile view is easy with SeedProd’s ‘Device Visibility’ settings. You can hide images individually or entire image sections with a single click.

To hide images individually, find the image you wish to hide, then click on it to open the content settings.

Open image content settings

Next, click the ‘Advanced’ tab, and expand the ‘Device Visibility’ section.

Open device visibility settings in the Advanced tab

To hide the image on mobile, click the toggle next to the ‘Hide on Mobile’ heading.

Turn on hide on mobile toggle

That image will now only display to desktop visitors and is hidden on mobile.

You can follow the same steps to hide entire image rows with SeedProd. Simply open the row’s settings, and in the ‘Advanced’ Tab, use the ‘Device Visibility’ settings to hide the image row on mobile.

section: hide image in mobile view

You can preview your changes by clicking the ‘Mobile Preview’ icon in the bottom toolbar.

Preview on mobile

Any ‘greyed out’ images won’t be visible to mobile website visitors.

Images hidden on mobile view

When you’re happy with how your design looks, click the Save button in the top-right corner of your screen.

Save your customizations

Follow the steps above to hide images in mobile view for any other theme template, such as your Sidebar, Single Posts, Pages, etc.

For example, if you want to hide your blog post featured images on mobile, you can edit your Single Post template and change the visibility settings on the Featured Image block like this:

Hide a featured image in WordPress on mobile

Step 5. Publish Your WordPress Website

When you’re ready to make your custom theme live, go to SeedProd » Theme Builder and turn the ‘Enable SeedProd Theme’ toggle to the ‘On’ position.

enable seedprod theme

Now you can preview your website to view the changes. As you can see from this example, the images we chose earlier are hidden on mobile.

hide image in mobile view on website

Method 2: Hide Images in Mobile View on Landing Pages

You can also use SeedProd to hide image in mobile view for individual landing pages. This is an excellent solution if you want to keep your existing WordPress theme and create high-converting landing pages in WordPress.

Step 1. Install and Activate SeedProd

First, follow the steps from above to install the SeedProd plugin and activate it on your website.

Note: You can use the free version of SeedProd for this method, as Device Visibility settings are available for all users. However, we’ll use SeedProd Pro for the larger variety of landing page templates.

Step 2. Choose a Landing Page Template

Next, go to SeedProd » Landing Pages and click the Add New Landing Page button.

Add a new landing page in WordPress

You can choose any landing page template on the next page, including:

  • Coming soon
  • Maintenance mode
  • 404 page
  • Sales
  • Webinar
  • Lead squeeze
  • Thank you
  • Login

When you find a template you like, hover over it and click the checkmark icon.

Choose a landing page template

You can then give your landing page a name and click the Save and Start Editing the Page button.

Name your landing page

Step 3. Customize Your Landing Page Design

Your landing page template will open in the same page builder we used to customize the WordPress theme earlier. It works the same way and includes the same sections and elements as the theme builder.

SeedProd landing page builder

The only blocks you can’t use on your landing page are the WordPress and WooCommerce template tags. Those blocks are hidden because landing pages don’t use dynamic WordPress content, such as blog posts, categories, tags, etc.

Instead, you can customize your landing page with:

  • Giveaways
  • Animated headlines
  • Optin forms
  • Countdown timers
  • Google maps
  • Social media embeds
  • And much more.
google maps block seedprod

Step 4. Hide Images with Device Visibility

You can hide images in mobile on your landing page the same as you did with the theme builder. Simply click the image you want to hide. Then in the ‘Advanced’ tab, turn the ‘Hide on Mobile’ toggle to the ‘On’ position.

hide landing page image in mobile view

The image will be ‘greyed out’ when you preview it on mobile, which indicates that the image is hidden for mobile visitors.

image in mobile hidden

Continue customizing your landing page until you’re happy with how it looks.

Step 5. Publish Your Landing Page

To publish your custom landing page, click the dropdown arrow on the Save button. Then select the Publish option.

Publish landing page

When you preview your landing page on a mobile device, you won’t be able to see the image you hid with the visibility settings.

landing page image hide in mobile view

Method 3: Hide an Image on Mobile with CSS

We understand that some website owners prefer to customize their sites manually. For that reason, the following method will show you how to hide images on mobile using custom CSS.

Note: we only recommend this method if you’re comfortable working with coding languages. You can use the built-in WordPress customizer to add custom CSS to your website.

First, find the class of the content element that contains your image. For example, your blog posts’ featured image. You can then hide it by using the following CSS class:

@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}

You’ll need to replace the ‘your-element-class’ with the CSS class that contains your image. You may also need to adjust the max device width to suit your WordPress theme and media query.

In this example, we hid the post featured image on mobile by targeting the ‘.featured-media img class’:

@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}

As you can see, the image disappears automatically on smaller screen sizes.

Hide image in mobile view custom css example

There you have it!

We hope this article helped you learn how to hide images in mobile view on WordPress. You might also like this guide on adding an author box to WordPress.

Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.

You can also follow us on YouTubeX (formerly Twitter), and Facebook for more helpful content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.