• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

How to resize image within page margins

Community Beginner ,
Feb 28, 2018 Feb 28, 2018

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!

Views

727

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 01, 2018 Mar 01, 2018

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

...

Votes

Translate

Translate
LEGEND ,
Feb 28, 2018 Feb 28, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 28, 2018 Feb 28, 2018

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!

Screen Shot 2018-02-28 at 17.20.08.pngScreen Shot 2018-02-28 at 17.10.33.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 28, 2018 Feb 28, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 01, 2018 Mar 01, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 01, 2018 Mar 01, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 01, 2018 Mar 01, 2018

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 01, 2018 Mar 01, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 02, 2018 Mar 02, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2018 Mar 02, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2018 Mar 02, 2018

Copy link to clipboard

Copied

Günter Heißenbüttel​  Like it.

THX

Nice weekend in the snow.

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2018 Mar 02, 2018

Copy link to clipboard

Copied

Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 06, 2018 Mar 06, 2018

Copy link to clipboard

Copied

LATEST

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!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines