Hi there.
For my simple slideshow gallery, I followed painstakingly all the rules (I hope) of the responsive bible, but:
I have a problem with the last (smallest) one, set at 768 fixed + 768 fluid with minimum width of 320px.
As you can see (attachments), the logo and the plus sign doesn't behave well aligned. I pinned it and I tried several ways to keep them aligned with the containers but no success. Also the don't keep the right vertical spacing in the small BP.
Please if you want to check the muse file: Dropbox - test.muse
Thank a lot for helping me.
Bart
1 Correct answer
It all works as expected. The problem is the same as very often: Pinning and scaling. Pinning isn’t relativ, scaling is.
And if pinned objects with no scaling shall align with elements, which scale proportionally, layout gets highly complex.
Therefore I suggest a much simpler way to get, what you want:
Try to simplify the layout by trying to combine equally scaling elements at (relative) equal positions.
In your layout:
- Assign no pinning to every element on your page in every breakpoint.
- Create two re
27
Replies
It all works as expected. The problem is the same as very often: Pinning and scaling. Pinning isn’t relativ, scaling is.
And if pinned objects with no scaling shall align with elements, which scale proportionally, layout gets highly complex.
Therefore I suggest a much simpler way to get, what you want:
Try to simplify the layout by trying to combine equally scaling elements at (relative) equal positions.
In your layout:
- Assign no pinning to every element on your page in every breakpoint.
- Create two rectangles (not image containers!) spanning from guide line to guideline, and set them to scale horizontally (in width only, not height and width). Check this in every breakpoint.
- Make one rectangle 15 px high and fill it with your logo ("unless"). Set filling options like this:
- Make the second rectangle 28 px high and fill it with the "+" icon. Use "Position: Centred/Right" in this case.
- Delete the old logo and plus images and place the two rectangles exactly at the top guideline of your layout.
- Check this in every breakpoint.
Now you should be done.
Here you can download this modified layout: https://www.dropbox.com/s/eyl3kv3iexvl9fj/bartolomeo1888.zip?dl=0
PS: UUUps a little bit late, but I hope, this helps though! 
I didn’t loook to your example, Uwe, because we wrote at the same time. Will have a look later this day!
My post refers to the original .muse file, not to yours.
And I was really faster? 
.
bartolomeo1888 I changed the uploaded file so that DOWNLOAD doesn`t corrupt your logo and the +sign.
It looks almost perfect on my android as well. I don`t hink it`s a night mare any more.
If I miss something let us know.
Using the logo and plus in Guenters way is of course another appropriate way.
But I cannot see any big difference between those two ways.
I have to admit, that UNLESS and "+" at 320 is a little bit inside the border of the picture, but if this really a nightmare?
To put the logo with Guenters way is better for logo, for "+" I still think pinning to the right border of the container is better.
But you could just take away the pinning of the logo and you still would have text on mobile.
This looks good on my android, check your phones.
Best Regards,
Uwe
Thank you very much for your precious tip. I did it as you said with the logo and plus and it's ok but as you can see in the screenshot, at the smallest points, alignement do not behave well. No respect for the limit of the layout.
My goal is to have a "fluid" slideshow (centered) with fixed points as you saw in my .muse file but in the smallest point I change with boxes of each of my works and then each of them lead to a scroll page with all the images (only in mobile view).
I think that I'm almost there but I don't like this misalignement... 
I don`t see any "BIG" disaster with "my" latest version: home . I unpinned the logo but pinned the "+" to container.
Android looks almost perfect.
Emulated looks all great:
I really don't know what to say.
This is an axample with the same setting as UWE's master page.
2 rectangles as in 3d thread, no pin, only resize width.
But do you see the difference between your screenshot and my screenshot from iPhone SE?
If you do not pin the logo the logo moves the same way than the picture (maybe not pixel perfect)
I only would recommend to pin the "+" to the right container border. I realize, no matter if you use a rectangle or a font, that they do not behave as the picture/frame.
But for me, as long as the logo is aligned I wouldn`t care too much about the "+".
That`s how my design looks like with logo unpinned and plus pinned to the right
That`s how it looks when "+" is unpinned as well.
That may sound like a compromise but one I could live with.
For some reason the pictures/frames do not keep the padding.
One way out could be to create white rectangle on each side, but I guess, even this would cause
some misalignment
That`s my latest version: home
Logo unpinned, "+" pinned.
The only way out would be to make the pictures on mobile full width.
Then the "alignment issue" is gone..
Go for it
Im am out here! If nobody can say, what/who refers to what/whom, I really prefer having a coffee an ice cream .…
Have a nice day!
Sorry, I damaged your file and therefore it couldn`t work as your original file.
You set the frames to 728 on mobile and to resize, and so they behave the same way as the frames with pictures.
I got it, again. Thanks and again-sorry.
It´s all about the details.
What do youn want with a breakpoint at 320 px? Do you know devices which have 320 px and less pixel in width? What should be your minimal page width in this case? 20 px?
If my really simple sample file is not clear for you, I’d suggest, to have a break at this point, and take a close look into these tutorials https://helpx.adobe.com/support/muse.html before going on.
A forum like this can give hints and solve problems, but it never is able to replace learning the software, you are using.
PS: Again a little bit too late!
Ok.
Now it's all almost clear. I built a new master from scratch. It's working now.
Thank you both.
I have a last question, then I'll disappear and start to build my website, finally
I would like to put some social icons like in the example but I need them to stay always at the bottom left of the gallery in every breakpoint. I tried to put it in the master but they stay at the very bottom of the page, as a footer. I tried also to put it on the home page changing position on every BP but... no good.
Thanks
Bart
Thank you both.
Do you guys live together or work in the same office
AdChoices