Am I correct in understanding that styling for the media query breaks in Webflow works in the order from largest width down to mobile? Having learned a ‘mobile first’ approach to applying stying through media queries, this will take a little bit of getting used to!
Yep, you got it @matt.bryant - styling cascades down, changes you make lower down won’t change those higher up.
1 Like
Thanks @StuM! I have a related question after reviewing those tutorials:
If I did want to change an image on the canvass between, say, the tablet and mobile breakpoints, the way you might using the ‘art direction’ approach in replacing an image using the <picture> tags in HTML5 in a static non-Webflow setting, could I ‘fake it’ by actually inserting both images and then hiding the first image in desktop/mobile, then switch the visibility to the other image in mobile? In other words, Image1 would appear in desktop and tablet views, then Image2 would appear in the same place on the canvass for mobile views.
RESOLVED: It worked! Looks like you can just insert both images into the same container, then switch the visibility on whatever device to give the appears of the image being replaced.
Nice one!
Also, whilst we are on the topic of images and resizing and responsiveness 
1 Like
This is brilliant, and a must have! I’m very happy to see this feature built in to the process. Fyi, even for Craft CMS this is not built in…you have to purchase a special plugin then jump through some hoops to get auto variants and optimization, so it’s pretty awesome that you’ve made this part of the Webflow-Workflow.
1 Like