Highlighted

Fluid dimensions for Rectangle in Adobe Muse

New Here ,
Jan 31, 2018

Copy link to clipboard

Copied

I use a rectangle tool to give some aesthetic design to my website. I want the rectangle box to have fluid height and width. The webpage cannot have fluid height and width since I would want to use scroll animation.

So my question is- how do I give fluid dimensions to my rectangle box?

I found one article online saying that adding this code can make it have 100% height (http://blogs.adobe.com/contentcorner/2017/05/12/create-a-full-height-rectangle-in-adobe-muse/)

This did not give me the desired results.

I also want to make it have 90% width. But it did not work out.

Please help.

yTsda.png

Code used:

<style>
.full {
min-height: 100vh !important;
height: 100vh !important;

min-width
90vh !important;
width: 90vh !important;

}
</style>

Output:

ZAvdu.jpg

Jw4qI.jpg

Expectations: (edited in MS Paint)

yCoor.png

Views

178

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

Fluid dimensions for Rectangle in Adobe Muse

New Here ,
Jan 31, 2018

Copy link to clipboard

Copied

I use a rectangle tool to give some aesthetic design to my website. I want the rectangle box to have fluid height and width. The webpage cannot have fluid height and width since I would want to use scroll animation.

So my question is- how do I give fluid dimensions to my rectangle box?

I found one article online saying that adding this code can make it have 100% height (http://blogs.adobe.com/contentcorner/2017/05/12/create-a-full-height-rectangle-in-adobe-muse/)

This did not give me the desired results.

I also want to make it have 90% width. But it did not work out.

Please help.

yTsda.png

Code used:

<style>
.full {
min-height: 100vh !important;
height: 100vh !important;

min-width
90vh !important;
width: 90vh !important;

}
</style>

Output:

ZAvdu.jpg

Jw4qI.jpg

Expectations: (edited in MS Paint)

yCoor.png

Views

179

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
Jan 31, 2018 0
Feb 01, 2018

Copy link to clipboard

Copied

Hi Bhavesh,

The code worked out for me for 100% heigh, however, doesn't look like it is suitable for defining width ratio.

Width is something you will have to adjust manually.

Try eliminating the width code and see if that works.

Regards,

Ankush

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
Reply
Loading...
Feb 01, 2018 1
New Here ,
Feb 02, 2018

Copy link to clipboard

Copied

But if the screen is too big, how will it looks then?

I want a percentage control for the rectangle box's width

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
Reply
Loading...
Feb 02, 2018 0
Feb 02, 2018

Copy link to clipboard

Copied

Please try the below code. Looks like its working for me.

<style>

.fullHeight {

min-height: 100vh !important;

height: 100vh !important;

min-width: 90% !important;

}

</style>

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
Reply
Loading...
Feb 02, 2018 1