Minimum width for just one image

Support
#1

I am looking to put a minimum width on one image on my homepage. I’ve added an ID to the image and custom CSS but it doesn’t seem to be working. What am I missing?

In a custom HTML block:
<img id="homepage" src="SOURCE" usemap="#image-map" width="1920" height="286">

In the X theme options custom CSS:
#homepage {
min-width: 450px !important;
}

Thanks!

#2

Hi @aosuniversity,

Thank you for reaching out to us. I checked your site and the min-width property is applying on the image element (see screenshot)

Can you please let us know what you’re trying to achieve by specifying the min-width property so we can guide you? If you want to increase the image clickable area, you can try wrapping the image in an anchor tag e.g:

<a href="#"><img id="homepage" src="http://aosmith.waterproducts.wpengine.com/wp-content/uploads/sites/2/2019/02/HotwaterComBackgroundEdited.png" usemap="#image-map" width="1920" height="286"></a>

Replace the ‘#’ with the actual link in the above code. Hope this helps!

#3

Thanks for the reply!

I am wanting to prevent the image from scaling too small, which messes up my image map links.

Thanks!

#4

Hello @aosuniversity,

The minimum width you have set in the css worked perfect as intended to be. It just did not display the image nicely because it does not display the image at the center. What I can suggest is that you create the page in Cornerstone and have to break down the image into a background image which is the green gradient, the image for the image sourcemap and 3 different buttons.

If you haven’t created anything with Cornerstone, perhaps this knowledge base article could help you:

You can find the rest of the articles in here:

#5

Thanks for your help! I will try that.

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.