Streaming live at 10am (PST)

Layout not consistent across Chrome and Firefox


#1

Hi there, all in Chrome is perfect but Firefox 23.0.1 shows the gallery 4 col grid very differently

http://www.andrewb.co.za/test/

(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?

Thanks in advance!


#2

I found that removing the "w-inline-block" class for the link that surround the images makes it show correctly on firefox too.


#3

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.


#4

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 smile


#5

You must have fixed it already because it looks fine on both chrome and firefox....ps like the subtle bg change on the body =)


#6

Hey @andrewb can you do a few things to help us fix this problem?

  1. Post your troubleshooting link
  2. Post your published "subdomain.webflow.com" link.

With this we can check out how you have things set up in Webflow and how its behaving when published.

(I also noticed you put your page background on the body element only on Hover state).


#7

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.

http://dummyrun.webflow.com/

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/


#8

Hi Andrew, sorry about the late response! I can't seem to access your site anymore. Can you throw it up again?


#9

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.


#10

Hi there.

Issue cropped up again, so if you wouldn't mind taking a look at my version of your demo:

http://andrewb.co.za/test/test03/

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.

Firefox 23.0.1 PC

Cheers smile


#11

I can totally help you out with that.

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.

Hope this helps!


#12

All helped perfectly... thanks for all your time and efforts, I know have all quirks ironed out smile


#13