Hi, I’m still a bit new to WF and I’ve looked in the forum and have gone through some of the tutorials, but I’m still stumped on how I can have my hero image automatically swap out for a similar but slightly different hero image when you go from desktop to table to cell phones.
I don’t know how well I’m explaining this, so here’s an example: on the main page of the Apple website is a photo of the Apple Watch Series 5. It’s a certain size on a desktop browser. When I resize my browser to a tablet size, the image swaps out to a smaller image, and then again when I resize my browser to mimic a phone size. I’ve uploaded the images I’m referring to.
I like this functionality as it’ll work well for my hero images. So what I’d like to have happen, is that the “Broken DNA large” image I attached is seen on desktops & tablets, and that the “Broken DNA small” image is seen on cell phones in landscape & portrait.
I hope this makes sense. If you click on my Read-Only link, you’ll see I uploaded the “Broken DNA large” and some placeholder text on the “News” page. Pay no attention to the rest of the site, as I’m still figuring out how to properly use WF.
If someone can point me in the right direction, that would be great. Many thanks in advance!
Here is my site Read-Only: https://preview.webflow.com/preview/dawson-lab-website?utm_medium=preview_link&utm_source=designer&utm_content=dawson-lab-website&preview=f505c74b7e96d219dfcc04c70900c25a&pageId=5dc29cc5f3d1443219fc8584&mode=preview