Breaking Mobile Style

Hi Andrei,

thanks for the test sites! The problem seems to be that Lazy Loader adds new lines after the li elements, and that spaces do not work good with inline-block elements.

I searched for a solution/reason but did not find one yet.

If you do not have to support really old browsers, you could give flexbox a try for the rows:

.t_tabz {
	display: flex;
	flex-wrap: wrap;
}

That would also work with the Lazy Loaded enabled.

Maybe that already helps?

Best,
Florian

Hi Florian,

If those new lines after the li elements are just a bug maybe the best fix would be simply eliminating them from the plugin code.

Regarding the really old browsers support, are you talking about browsers that do not support flexbox? I am asking so I can make the research.

Thank you for the code snippet, it fixes the li elements. As for the second section below it (the one with the iframe & image) is flexbox also a solution there?

Thank you,
Andrei

Hi Andrei,

yes, that would be the fix in theory, but I don’t know how to prevent those new lines ?? I do not use regular expressions to modify the markup but the DOMDocument PHP class. And the class has a property to format the output code, but when I set that to false, the result is the same.

Regarding the really old browsers support, are you talking about browsers that do not support flexbox? I am asking so I can make the research.

Yes, that’s what I mean. Here is a good overview which browsers are supporting it: https://caniuse.com/#feat=flexbox

As for the second section below it (the one with the iframe & image) is flexbox also a solution there?

Propably, yes (I am not fully sure why that crashes with Lazy Loaded, though). Here is a guide about flexbox, that should help get you started ?? https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Best,
Florian

• This reply was modified 5 years, 4 months ago by Florian Brinkmann.

Hi Florian,

After further testing I got the same results on a full width screen.

Something interesting though: Lazy Loading adds these new lines on li, iframes but not on images. If you look at the 3-rd section you will see that the image next to the iframe are correctly displayed on both pages here and here.

Don’t know yet what other elements are added these new lines by Lazy Loading. Depending on the scale of the impact it is having on the website I will make a decision.

If you do find a (future) fix inside the plugin please give me a buzz. I would like to continue using Lazy Loading.

Thank you,
Andrei

Hi Andrei,

oh, you are right, seems it does not add the new lines after each element. It does not add it after iframe elements, too – the reason it fails there is that the noscript of the picture is followed by a line break (and that is something the plugin really adds ?? ). So that would be something I could ?fix?, but that does not help you for the list.

I will see if I stumble upon a solution and come back to you then ??

Best,
Florian

• This reply was modified 5 years, 4 months ago by Florian Brinkmann.
• This reply was modified 5 years, 4 months ago by Florian Brinkmann.