issue with responsive pictures (floating apart)

[hege_d]

I have been trying to solve this all weekend...

I have a site build entirely on pictures. My site works fine in 1200 px were all pictures are close together (4 columns, many rows), and some of it works nice when i drag the browser window smaller. All elements are set to responsive with and height. Some of the pictures stay together as i want them, but as i scale browser window some of them float apart - some more than other Please see what i mean on hege landing . Hope someone can see what's wrong, and let me know...

[hege_d]

Just an addition to post above: This is how it looks on less than 1200 px - I have marked with the !?  Why does it makes these gaps???

Hi -

[Mylenium]

You would have to group/ nest them once more in a page-sized container/ composition. It pretty much works as expected otherwise. The scaling is applied to the topmost container element and then inherited by the child elements and if they are in separate sections, they behave as you see it.

Mylenium

[hege_d]

Thanks for responding so quick!

Ok:

-I tried to group all elements - that did not change anything

-I tried to group all elements and place them in a blank composition - then i loose the responsiveness.

I assume group and nest is the same!

Is there a responsive container/composition?

Why is the gaps different sizes? That make me think theres something with the pictures...

I would like my pictures to downscale all the way to 400px were i will add breakpoint and make it phone friendly...

[hege_d]

would it make a difference if i made rectangles with fill instead of importing pictures and resize them?

[Günter Heißenbüttel · Accepted solution]

I will never understand, why some community members make suggestions again and again and again, without knowing anything about Muse!

Your problem can be solved, but it is quite tricky and labor-intens to do so.

Just read my answer in this thread https://forums.adobe.com/thread/2271454​, download the sample file, I linked, and try to understand, how to solve the issue.

[hege_d]

I love you Günter - problem solved!

Thanks for answer, link to thread and downloadlink - it is working! Yes, theres some work to be done, but with my first upper 16 pic working, i see the effort is worth the while, and i am very, very happy

[Günter Heißenbüttel]

Fine!

[hege_d]

i guess it will take me a couple of weeks... A bit hard to find out what to group, and some problems because im working with layers - but i can always just keep the upper part, if everything else fails

[hege_d]

I wonder if you work weekends?

I am getting much closer with all my pictures, who are much more together, and less floating, than they used to. But i still have some trouble getting the last ones to react as i'de like. I have made empty frames from the top, grouping. I have grouped pictures, and it looks like locking the pictures also help. Sometimes i loose the button effects, but i am not sure this happens when grouping, locking or if i by mistake have empty image on top instead of under.

any advices by looking at http://www.hege.dk/front.html?

You can se what i want in 1200 px and more - its when i scale down the problems begin.

[Günter Heißenbüttel]

I told you, that this will be very laborious!

For testing reasons I created a simple test page right now.

What I did:

I built a grid of images (=proportionally scaling image containers), each 250 x 250 px, side by side. Then I resized single images exactly within this grid, and added some strips – all precisely using the basic grid. Even after deleting some images within their container (not the container itself!) and "filling" these  containers with a background images, all works fine and as expected. And I haven’t to place any placeholder rectangle to "tell" Muse what to push down, nor it is necessary to group elements!

I think, normally all works very well, if you really place the objects in the same size (or multiples of this size).

Just have a look at this .muse file: https://dl.dropboxusercontent.com/u/7046655/image-grid.zip

I even rotated some element and – in most cases – this works too (well, sometimes it doesn’t; I think in this case we meet some mathematical rounding errors).

[hege_d]

Hi Günter

Would you say it is better to resize pictures than to fill rectangles with background? - I thought backgroundfill was better, so i changed them all :&

Also I can se you did this without the empty boxes in the back, that i have bee struggling with... Hmmm.

It makes no sense why some pictures stick together and others dont.

I can see you are having some issues with white space emerging as well, even if most works fine...

[Günter Heißenbüttel]

As I said: My approach works, if the images perfectly fit into the grid. Placeholder elements only are necessary, if Muse – according to your layout – can't decide, which elements shall push which element down.

If you place images or use the "fill" method, makes no difference in that respect.