Hello Hans!
Yes, you can adjust that with custom CSS. The selector to use is:
.layout-left .hotspots-image-container
which controls the width of the image area. Making it smaller will make the more info area bigger. By default, the image area is 100% wide on small screens, 66% wide on screens that are at least 600 pixels wide, and 75% on screens at least 900 pixels wide. Don’t forget to include media queries when you’re adjusting the width.
We have a helpful article on adding custom CSS to your site here: https://wpdrawattention.com/document/customizing-draw-attention-css/
Let us know if you need any further help with this.
Hi Natalie,
Thanks for your help!
I have added this CSS in the Simple Custom CSS plugin, but it isn’t working so far. Any idea why?
.layout-left .hotspots-image-container {
max-width: 60% !important;
}
Hi Hans!
I went to look at your site to troubleshoot, but I can’t find the Draw Attention image on the page. Has it moved elsewhere? Can you point me to a page with the image so I can take a look?
–Natalie
Hi Hans!
It looks like it needs to be width, not max-width to override the default CSS. Don’t forget to include media queries also as on small screens, you probably want the image to be 100% width – otherwise it gets so small, it’s impossible to tap the active areas with a finger.
–Natalie
