Acabado: Change Hero Image For Mobile

Please Note: This comes with no support from myself or from Income School as it is only a proof that the ability exists to run Acabado while maintaining the speed benefits. Use at your own risk, I don’t have the ability to make updates to this content.

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(https://acabadotheme.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!

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!