NEW: Host and manage charity events in one place, with AI-powered auction tools.

CharityAuctions Logo
CharityAuctions

How to Hide Images on the Mobile View of Your Auction Page

TL;DR

You can hide images on mobile by adjusting your page design settings or adding a small CSS snippet to your auction’s custom code area. This helps keep your layout clean and mobile-friendly.

Author: Tom Kelly 3 min reads

Why You Might Want to Hide Images on Mobile

Mobile screens are smaller and can get cluttered quickly. Hiding certain images on mobile:

  • Improves page load speed.
  • Keeps your design simple and readable.
  • Focuses attention on the most important content.
  • Reduces scrolling for bidders on smartphones.

This is especially useful for background images, decorative graphics, or secondary banners.

Step 1: Log In to Your Event Dashboard

  1. Log in to your event dashboard.
  2. Select the auction event you want to edit.
  3. Go to Page Design or Event Settings.

Step 2: Identify the Image You Want to Hide

  • Determine which image or image section should be hidden on mobile.
  • Common examples include:
    • Header banners
    • Large hero images
    • Decorative graphics
    • Sponsor logos in certain sections

Knowing the exact element helps you apply the change precisely.

Step 3: Check for Built-In Visibility Settings (If Available)

Some templates or themes include visibility controls. If your platform supports it:

  • Click on the image block or section.
  • Look for “Display Options” or “Responsive Settings.”
  • Toggle “Hide on Mobile” or similar option.
  • Save your changes.

Preview the page on mobile to confirm the image is hidden.

Step 4: Add Custom CSS (If No Built-In Option Exists)

If your platform doesn’t include a visibility toggle, you can add a simple CSS rule:

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

  • Replace .your-image-class with the class or ID of the image container.
  • Add this code in your Custom Code or CSS section under Event Settings.
  • Save and refresh your auction page.

This hides the targeted image only on devices with screens 768px wide or smaller.

Step 5: Preview on Mobile

  • Open your auction page on a phone or use your browser’s mobile preview.
  • Check that the correct image is hidden.
  • Make sure other sections still display as expected.
  • Adjust the class or CSS if needed.

Step 6: Optional — Hide Multiple Images

If you want to hide more than one image, list multiple selectors in the same CSS rule:

@media only screen and (max-width: 768px) {
.banner-image, .background-image, .sponsor-logo {
display: none;
}
}

This keeps your mobile view clean and consistent.

Pro Tips for Mobile Optimization

  • Keep critical content like titles, buttons, and bidding sections visible.
  • Test your layout on multiple devices (iPhone, Android, tablets).
  • Use smaller, optimized images for mobile rather than hiding everything.
  • Always preview changes before your auction goes live.

Frequently Asked Questions

Why would I hide images on mobile?

Hiding nonessential images on mobile improves page speed, reduces clutter, and keeps the focus on key bidding elements.

Can I hide just one image without affecting others?

Yes. Use a specific class or ID in your CSS or built-in visibility settings to target only the image you want to hide.

Do I need to know coding to do this?

No. If your platform has a “Hide on Mobile” toggle, no coding is required. If not, a short CSS snippet does the job.

Will hiding images affect my desktop view?

No. The CSS rule targets only screens smaller than 768px, so desktop and tablet views remain unchanged.

Can I hide multiple images at once?

Yes. Add multiple class names in your CSS rule or toggle visibility for several image blocks individually.

How can I find the image class or ID?

Right-click on the image in your browser and select “Inspect Element.” Copy the class or ID to use in your CSS.

Can I schedule when images are hidden?

No. Image visibility is based on screen size, not time. However, you can manually update or remove the CSS when needed.

Will hiding images improve page speed?

Yes. Removing nonessential elements on mobile can make your auction page load faster and reduce bounce rates.

Can I use this method for videos too?

Yes. You can apply the same CSS rules to video elements to hide them on mobile screens.

Is this change reversible?

Yes. Simply remove or comment out the CSS rule, or turn off the visibility setting to make the image visible again.

💡 Try this in ChatGPT

  • Summarize the article "How to Hide Images on the Mobile View of Your Auction Page" from https://www.charityauctionstoday.com/p/help/how-do-i-hide-images-on-the-mobile-view/ in 3 bullet points for a board update.
  • Turn the article "How to Hide Images on the Mobile View of Your Auction Page" (https://www.charityauctionstoday.com/p/help/how-do-i-hide-images-on-the-mobile-view/) into a 60-second talking script with one example and one CTA.
  • Extract 5 SEO keywords and 3 internal link ideas from "How to Hide Images on the Mobile View of Your Auction Page": https://www.charityauctionstoday.com/p/help/how-do-i-hide-images-on-the-mobile-view/.
  • Create 3 tweet ideas and a LinkedIn post that expand on this help topic using the article at https://www.charityauctionstoday.com/p/help/how-do-i-hide-images-on-the-mobile-view/.

Tip: Paste the whole prompt (with the URL) so the AI can fetch context.

Tom Kelly

Tom Kelly

Tom Kelly, TEDx speaker and CEO of CharityAuctions.com, helps nonprofits raise millions through auctions and AI. He hosts The Million Dollar Nonprofit podcast and inspires leaders to live their legacy, not just leave it.

Table of contents

Previous Next