Hi all! I could use some help on my portfolio I'm designing.
This is how it looks like at a breakpoint:
This is how it looks in between breakpoints:
Things I've tried:
All of these resulted in various amounts of movement seen above.
Is this a pinning problem or a breakpoint problem or am I just missing something? They move mere pixels before and after the breakpoints. Same problem in the browser when I preview it as well.
Copy link to clipboard
Without seeing the .muse, some objects resize in width and height and some do not resize the same way, I guess.
You could try grouping elements but am not sure if this solves everything.
Pinning is not recommended for fluid width breakpoints anyway (except pin to container).
If you still face issues, could you provide a .muse via dropbox or similar filesharing?
Would be best to create an extra site with one page with these three elements which behave strange.
Here's the file. I left the page as is because it's how it interacts with the bottom and top squares that make it strange.
I tried grouping it but the text still moves and there's a space between the top and bottom still. I put a black box in the background to try and hide the giant gap, but it still looks weird.
As fotoroeder said, we normally need the .muse file to check this. But: If you send us a .muse file (for example via Dropbox or a similar file sharing service), please only link a small file with only one page and some clear simple examples, not a complete website! We want to help, not to create websites for community members!
The problems, you are seeing, have been discussed here over and over again and are typical issues, when creating responsive pages. Before sending a. Muse file, read these links very carefully. This normally should cover the issues you are encountering:
If this doesn't help, upload a small .muse file (delete all unnecessary elements and pages), which shows the problem, to Dropbox or a similar service and we'll have a closer look.
As I assumed above, elements are different set in their resizing. Elements are different pinned, even to browser (Head).
Pinning to browser at least for mobile is not recommended.
All Head elements are pinned to the top center, even the right and left elements. That´s one reason you need so many breakpoints.
There is a black rectangle with no real function, set to browser width and the surrounding elements resize different ( at the bottom in your layers panel).
Your elements TARGET, COMMUNICATE, EXECUTE with graphic elements, text behaves very different.
Watch your file, reduced to the moving graphic elements. Watch properly the header (pinning to container), not sure, if the menu works like this. Watch the download button (pure text) and you may realize how "difficult it might be for muse to decide how elements should behave together. I did now an easy way and grouped all content. At the bottom, above the footer you may also see the difficulties.
You would have to do decisions.
Please read all advices from Guenter very properly and watch.