Changing images for an interaction within different breakpoints

Hey everyone -

I’m hoping somebody can shed some light on an issue I’m having with a pop-out image for my website design.

I have a CTA pop-out I’m using for my desktop home page. The image is an imported .svg which is triggered bay a page scroll. The image is a voice balloon shape, which works well for desktop where I have more room. I’d like to use a different shape for mobile, considering the tighter space.

I’ve discovered I needed to import the mobile shape and turn off the desktop shape in order to keep them both. This works great.

The issue is the interaction. I can use the interaction on mobile, and indicate the new mobile target, and everything works great, but the desktop stops working. I’ve copied and renamed the interaction and tried applying a combo class for mobile, but that doesn’t work either…

I may be attempting the impossible, but perhaps somebody out there can help steer me in the right direction.

the current build has the interaction applied to the tablet version. It deploys right after the trestimonials

Thanks!

link below


Here is my public share link: Webflow - Elan V4

I’d be happy to take a closer look at the situation but I’m having trouble figuring out which element you’re talking about on the homepage.

Would you mind uploading a screenshot of the element in question and/or where it is on the homepage?

Thanks @mikeyevin . The element in question is the orange CTA circled in red. I’m trying to use a different graphic for mobile, but having both interact is proving to be difficult. Any help would be appreciated!

![Screen Shot 2022-11-19 at 9.37.01 AM|690x359](upload://f6


kQefpZtf4P2F7KYgqxtctSHUz.jpeg)

Also, the site currently has the mobile version working, not the desktop. When I switch to the desktop interaction, then mobile stops working… ugh.

Thanks so much for the extra information :pray:

When targetting the interaction, are you using the SVG shape itself or the containing element? If it’s the latter, I don’t believe there should be an issue hiding/showing different elements based on the breakpoint since you’d have the same trigger element across all breakpoints. The only reason I ask is I’m not seeing any interactions on the project, so I’d imagine you’re still actively working on things.

That said, you can always use a background image instead of a separate image element. Since background images are set as a reference in code, you can change the image based on the breakpoint without needing to use multiple image elements.

Another option — since the shape is fairly simple — is to recreate it with individual elements within the designer. All you’d need is a rounded div with two lines of text inside and a small protruding triangle positioned along the right edge. Then just hide the triangle, un-round the two right corners and add some right padding and you’ve got the smaller, alternate version for mobile.

Hopefully that helps, but let me know if you have any questions or run into issues and I’d be happy to throw together a simple example for you to reference :+1:

Thanks @mikeyevin for your response.

I’m using a link block as the target, which contains the svg. I did have a div inside the link block, but just removed it. The interaction is in effect, it’s placed on a section titled “wrapper”.

ok - so, I used the image as a background instead of a separate image element. It’s working now! Phew!! Thanks so much for your help.

I’m incredibly new to web development, so this has been quite the learning experience for me. Having folks as yourself available to help has been huge!

I’m sure there are better ways to go about this, but this seems to be working…

I do have another question: I’m now seeing a hard edge clipping the drop shadow I’m using on the mobile (tablet, for now) version. The bounding box for the link block indicates plenty of space around the svg, but when I preview it, there’s some clipping… Any thoughts on this?

New link:

https://preview.webflow.com/preview/elan-v4?utm_medium=preview_link&utm_source=designer&utm_content=elan-v4&preview=d8a55645876eedce3ef2507ec49b1276&workflow=preview

Thanks again!!

I’m only seeing a slight amount of clipping on my end — but I’d suggest using the “Contain” size option within the background image settings along with the applying the position property to the right side:

This will keep the image small enough to completely fill the background of the element and aligned along the right edge. Along with those changes, I’d also recommend disabling the background image repeat since the “Contain” property can cause the repeating background image to show depending on the aspect ratio of your container:

image

Let me know if you have any other questions :+1:

Great answers! Thank you so much for your help!

1 Like