[Pro] 4 gapless flexible sized images inline design - impossible ?

Freeway
1

I have been trying to build 4 gapless, flexible size images based on backdraft 2.1 and did not suceed up to now.

In “Standard” to “Small Tablet 720” breakpoints they should appear:
top left 1 - top right 2 - bottom left 3- bottom right 4. In “Mobile 570” to “Small Mobile 320” breakpoints they should appear:
top 1 - top 2 - top 3 -top 4

There should be no gaps between the pictures.
I managed to make them appear in the above order - BUT:

At every breakpoint there are different gaps between the pictures. If I try to remove the “automatic line breaks” which are sometimes hidden behind the pictures, the picture disappears with them. Sometimes it is impossible to remove the line breaks. And sometimes the space between the pictures (at mobile breakpoints) appears and I do not have any idea why.

This should be an easy task.
Thanks for help.

Meg

http://kiatsu-massage.de/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Sometimes it is impossible to remove the line breaks. And sometimes the space between the pictures (at mobile breakpoints) appears and I do not have any idea why.

Have you tried using the Remove Paragraph Tags action - available at the 'Forge

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

BTW - 15 BP is excessive.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Thank you David.

Remove Paragraph Tags action did not improve anything.
There should be only the standard breakpoints from Backdraft. Where did you discover 15 breakpoints ?

Meg

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Remove Paragraph Tags action did not improve anything.

What did you apply it to - I think you should use it on twoLeft1, twoLeft2, twoRight1 and twoRight2

You also have some margin-top on some of the pic divs at different BP - but not all.

I guess you found some of those 15 as you appear to be down to 5 or 6 now.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

I have been trying to build 4 gapless, flexible size images based on backdraft 2.1 and did not suceed up to now.

I assume that you are talking about the 2 over 2 images… that are images only…

Now, I normally don’t comment on Backdraft posts because I don’t use it, but let me say this: the image containers are already gapless… it’s the images inside not fitting edge-to-edge which make the “gaps”.

##A Solution

Use those images as background-images on the twoLeft and twoRight containers, set the background-size to “cover”. Set the opacity of the inline images to “0” so that the containers keep their height, but only the gapless background-images show.

This is also good progressive enhancement for those cases where CSS fails as the inline images will be visible while the background image will not.

###TIP:

I don’t care what you name your image files, but it would help you when you import them in Freeway to name them (ID) with shorter, less similar names.

Here is an example of what my proposal would look like: Thebigerns.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options