How do I make Picture Responsive like in the attached video?

New Here ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

Hi all,

Please look at this attached video. I haven't figured out how to make a picture responsive like this. Does anyone have a solution?

Thanks!

Views

692

Likes

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 , Aug 13, 2018 Aug 13, 2018
Muse does exactly, what you tell it to do!As already explained in your other thread (https://forums.adobe.com/thread/2522301), you pinned the menu elements to the bottom of the browser window – and just that happens! The blank space isn’t caused by the image, but by the height of your browser window. Use the „Footer“ option instead to correct this. Here a modified .muse file: https://www.dropbox.com/s/kxmfla1tolm1jhm/Cornerstone%20Scaling%20Issue_Mod.muse?dl=0

Likes

Translate

Translate
Adobe Community Professional ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

Try this video.

Adobe Muse 2016 Tutorial | Responsive Images vs Fills - YouTube

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
New Here ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

The video was a helpful in showing a different way of creating an image in the site. Thank you. However, I am still having the same problem. When I shrink the browser's width, it creates this white space, when the image should still hit the bottom of the page and not condense its height like it's been doing. How do I fix this?

Screen Shot 2018-08-10 at 4.52.00 PM.png

Likes

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
Adobe Community Professional ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

Are you using Responsive  Place (foreground image) or Fill (background image)?

Your example video appears to be using a background image (fill) because there is noticeable clipping when the image is down scaled.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
New Here ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

I have tried both and they both leave the white space at the bottom. The picture I put in my last response was using fill.

Likes

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
Adobe Community Professional ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

Do you have a sticky footer?

Can you post a URL to your problem page?

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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 ,
Aug 10, 2018 Aug 10, 2018

Copy link to clipboard

Copied

Don‘t use an image frame (=„rectangle frame tool“), but a simple rectangle (=„rectangle tool“), fill it with an image by using the „Fill“ command in Muse‘s upper control strip and set the rectangle to „Responsive Width“ (not „Responsive Width and Height“). Then all should work as expected.

I described the difference between “rectangle tool“ and „rectangle frame tool“ here: https://forums.adobe.com/thread/2211736

Likes

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
New Here ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

I do have a sticky footer. I have put it at responsive width only and I am still left with the white space like before. I am also only using the rectangle tool, not frame. I've seen some posts talk about Muse not allowing full height capacity - wondering if this is the problem?

Likes

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
Adobe Community Professional ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

I'm not a big fan of sticky footers that rely on hacks which Muse does because it's not capable of supporting flexbox.  But that's another topic. 

Try it without the sticky footer and see what happens.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
New Here ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

Turning off sticky footer doesn't help

Likes

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 ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

Then give us a link to a sample .muse file (Dropbox), which demonstrates your issue. I think, you are mixing up differnt issues. The blank space isn‘t necessarily related to you “image scaling problem“.

Likes

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
New Here ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

Likes

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 ,
Aug 13, 2018 Aug 13, 2018

Copy link to clipboard

Copied

LATEST

Muse does exactly, what you tell it to do!

As already explained in your other thread (https://forums.adobe.com/thread/2522301), you pinned the menu elements to the bottom of the browser window – and just that happens! The blank space isn’t caused by the image, but by the height of your browser window. Use the „Footer“ option instead to correct this. Here a modified .muse file: https://www.dropbox.com/s/kxmfla1tolm1jhm/Cornerstone%20Scaling%20Issue_Mod.muse?dl=0

Likes

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