(a first attempt to rebuild and tweak an existing page I referenced on the net - it’ll get taken down shortly so there’s no chance of it being indexed)
Is there something I modified for the mobile version (did some hacking there to create some vertical margins between elements) that created this? Or the fact that images are being displayed by Firefox at the actual size and not scaling correctly?
Yes this is exactly the issue. I did a test with only 4 images - perfect. Then duplicated the row and added each image into a link block and the issue immediately crops up. Hope a fix comes soon…
I’ll remove the class - thanks for the tip… don’t need it in this instance.
Just makes sense that if you don’t define a selector then the class simply isn’t added - I see it adds the default class tag if left blank… I understand work in progress
Hi there, thanks for the responsse (and pointer on the BG, wasn’t aware of that!).
I didn’t want to publish it on your servers due to it being a clone (with slight mods) of another comany’s but have done so now - I’ll deactivate it after your following reply.
Then here where I removed the “w-inline-block” class for each of the portfolio images (4 col, 2 row desktop) and Firefox then renders the images with appropriate grid scaling perfectly: http://www.andrewb.co.za/test/
Hi there, due to being a clone of an existing site I didn’t want it left online. It’s really simple to replicate, drag a column grid into the page (in this case a container although not sure if necessary). I had a 4 column. Drag images into each of the cols, images set to ‘auto’ (not assigning background images to the DIV’s). View in Firefox and images aren’t scaling correctly. It’s all due to to something in the “w-inline-block” class which you’d need to analyse. Cheers.
The 4 ‘honourable mentions’ images don’t scale responsively at mobile breakpoints.
And the form submit button - in spite of looking perfect within Webflow’s preview - has shifted position above one of the fields.
The reason why the images aren’t expanding to the full width in the smaller devices is because by default images only span as wide as their width. If they are bigger than the container they are inside of they will fit to 100% of its width (so that it doesn’t get cut off). Now if the container is bigger than the native size of the image, the image will not expand to be 100% because then it will be distorted. So if you want it to expand to the full width of the container you can set the image class to width:100% for that media query like so:
As for why your form submit button is in a weird place when viewing it on Firefox - it’s because you have Float Left on your last input field. Different browsers render floats differently and Firefox in this case removed the height of the floated element (which what happens when you float something - it doesn’t flow with the normal document flow.)
So remove that float from the Phone Portrait media query and it will look great.