Copy link to clipboard
Copied
I'm new to Muse but cannot find an answer online or in the forum's to this seemingly simple action.
I have an image which fills the page body. That is the page width minus it's margins. When the page resizes the image resizes in proportion to the browser which means it falls outside of the page margins until it hits the next breakpoint. It's now not aligning with the text boxes or logo etc
In code it would be something like setting the image to be 100% of the main container. Do you have containers in Muse? Am I missing a checkbox somewhere?
Any help greatly appreciated!
imyviemarie schrieb
I don't think 20px margins is big at all! I think anything smaller than that would be a bad design decision - the elements on the page would be so close to the edge of the browser, it would look like an error.
But on the minimum width of 320, 40 px altogether is quite a huge amount of padding, isn`t it?
Of course there´s still padding necessary but as far as I see – I recognize the same than you: the margins get smaller towards 320 – but you could change your layout regardless
...Copy link to clipboard
Copied
How did you layout? Fixed width breakpoints, fluid width breakpoints?
How did you set the resizing options? Stretched to browser width?
If you use an image to stretch to browser width, it does not bleed outside the canvas/the margins.
Show us some more detailed screenshots, I suggest.
Best Regards,
Uwe
Copy link to clipboard
Copied
Hi Uwe,
Thanks for your reply.
The layout is fluid, images are set to 'responsive width and height' (you can see in the first image). The second image shows what happens when you resize (with the not resizing within the margins).
I've a feeling the answer will be the classic 'Muse doesn't let you', but I'm hoping I'm just missing a trick somewhere!
Copy link to clipboard
Copied
Well, I guess this is quite the normal behaviour. The margins would be to huge, from a percentage point of view, I´m afraid.
The question, though, why the margins do not react responsive? Maybe it is just a technical questions?
I guess, to watch the site on a mobile shows that this is not a "real" problem?
Best Regards,
Uwe
Copy link to clipboard
Copied
Apologies if I have misunderstood your reply, I don't really understand what you mean by a 'real' problem. I think the images show that it is definitely happening on my Muse site.
I don't think 20px margins is big at all! I think anything smaller than that would be a bad design decision - the elements on the page would be so close to the edge of the browser, it would look like an error.
I'm not a coder, but I'm sure you don't usually have responsive margins (on the outside of a web page), for this exact reason. It would mean that as you resize your screen smaller, then the elements would get too close to the edge of the screen. Most websites I use (if not all) have a set margin on the page to ensure that all the designed elements stay well proportioned. If the site contains a grid or uses columns then the internal margins would be responsive, but not the outside ones that contain the whole site.
Copy link to clipboard
Copied
imyviemarie schrieb
I don't think 20px margins is big at all! I think anything smaller than that would be a bad design decision - the elements on the page would be so close to the edge of the browser, it would look like an error.
But on the minimum width of 320, 40 px altogether is quite a huge amount of padding, isn`t it?
Of course there´s still padding necessary but as far as I see – I recognize the same than you: the margins get smaller towards 320 – but you could change your layout regardless of the margins. These guides are just, well, guides, to help. You can move your elements whereever you like without restriction ( as long as it stays inside the canvas). You can even place them more to the center .
Best Regards,
Uwe
Copy link to clipboard
Copied
Ah! Yes the pixel number of the margins doesn't matter in this scenario, I was looking for help with keeping the images within these margins when it responds.
As mentioned in the original post, if you wanted to do this using html/css, you would do something like setting the image to be 100% of the main site content container (which would have padding/margin on it). Is there a way to do this with Muse?
Copy link to clipboard
Copied
From my experience, no. I kindly invite Günter Heißenbüttel to this. His background is awesome. He may have some more insights than me.
Best Regards,
Uwe
Copy link to clipboard
Copied
Thanks Uwe!
I know that Muse is still in an early phase, and many things you need to 'hack' around, but it's always good to ask isn't it
Copy link to clipboard
Copied
imyviemarie: As Uwe said: In print design nobody would set the same margins for an DIN A3 and a DIN A6 layout. It would be way to wide in smaller paper sizes.
For me, it is the same in web layout. But here, opinions might differ. If I need customised margins, I do this by using breakpoints.
In fact responsive Muse doesn’t calculate object width according to page margins (which are only a layout orientation), but according to the page width. Therefore responsive elements may loose contact to the margin guidelines, when the page width is resized.
If you urgently need the feature „Muse element honour fixed margins", I’d suggest, to place a feature request.
Nevertheless, there are different ways, to mimic fixed margins. Just have a look at this screencast:
Here you can download the corresponding .muse file: https://www.dropbox.com/s/f5xvt8zoluum0hb/fixed-margins.muse?dl=0
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Thank you!
Copy link to clipboard
Copied
Thanks Günter,
I think part of the discussion got hijacked by the actual amount of space. For example, an A4 and an A5 may indeed have the same margins. I certainly wouldn't expect one to be 10mm and the other to be 8mm!
Back to the question at hand. Thanks for explaining how Muse works with clarity. It's great to have someone say yay or nay with certainty
The screen cast looks spot on! I'll take a look at the files and see what is going on behind the scenes.
Thanks for your help!!