Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Homepage Hero Image Change Size On Mobile

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

Many people don’y like the hero image from their choice in the desktop view on the mobile view, this is typically due to the image not showing the section they had really wanted to be the focus.

I re-tasked code which allows you to overlay the Hero Image which was aimed around making the image a little darker for better font visibility. What I have below allows for easier image replacement with any image you choose.

Image Size For Mobile Hero Optimization

For proper scaling and to look well I would ensure this smaller logo dont have any text as the hero can have its own text and a call to action which are valuable.

The image size that looks about spot on when I was testing was 350×300 and uploaded to your media section for use with the full URL that the upload provides you.

Add A Specific Hero Image For Mobile with Dark Overlay

The below custom CSS specifically helps to call an image on a mobile device and then set the image to cover the space available.

This has a darker overlay so you can use a bright image and it will help tone it down so the text is more readable.

@media only screen and (max-width: 400px) {
        section.hero-container {
            background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), 
            url(https://www.insertyoururlhere.com/image-location-here.jpg) !important;
        background-size: cover !important;
    }
}

Add A Specific Hero Image For Mobile No Overlay

The below custom CSS specifically helps to call an image on a mobile device and then set the image to cover the space available.

This is a better way to manage this if your image is already darker or you have a different color text.

@media only screen and (max-width: 400px) {
        section.hero-container {
                background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url(//cdn-5e1e2cc6f911c8096c0b2d4d.closte.com/wp-content/uploads/2019/08/DIVI-1.jpg) !important;
    background-size: cover !important;
    }
}

Final Thoughts

Hopefully this helps you to craft a nicer mobile display of your website hero section and maybe get more clicks when you have a mobile visitor.

This was a request from people on here who asked, if you have something you would like please leave a comment below!

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content