Highlighted

making my page height responsive without making width responsive

New Here ,
Aug 09, 2018

Copy link to clipboard

Copied

hey, i have a webpage with very wide background videos or pictures, so that they fit on very wide screens. all my objects are pinned to the middle of the page and resizing is set to none on everything.

now the problem is that when i publish the website, theres a white space on the bottom, varying on different screens. when i previewd it in brower the white space wasnt there.

I made the whole thing a bit taller, and now when i preview it i have to scroll down on it.

why can't the height just always be 100% ?

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

Zeronix123  wrote

why can't the height just always be 100% ?

because you pinned it and set the resizing to none... the browser is trying to do what you told it to and that means something has to give so understand that this design will not work on small devices

Views

279

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

making my page height responsive without making width responsive

New Here ,
Aug 09, 2018

Copy link to clipboard

Copied

hey, i have a webpage with very wide background videos or pictures, so that they fit on very wide screens. all my objects are pinned to the middle of the page and resizing is set to none on everything.

now the problem is that when i publish the website, theres a white space on the bottom, varying on different screens. when i previewd it in brower the white space wasnt there.

I made the whole thing a bit taller, and now when i preview it i have to scroll down on it.

why can't the height just always be 100% ?

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

Zeronix123  wrote

why can't the height just always be 100% ?

because you pinned it and set the resizing to none... the browser is trying to do what you told it to and that means something has to give so understand that this design will not work on small devices

Views

280

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

Copy link to clipboard

Copied

To fill your screen with a background image, use the CSS background-size:cover property.

At the risk of being called a heretic,   I made this quick demo in Dreamweaver because Muse doesn't support  Flexbox for vertical centering.  And since Muse is EOL now, it will never be updated to support Flexbox or any of the other modern web technologies that designers should know about.   At any rate, the code for this is very simple.   Now let the flaming begin...

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Full Screen Background</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

body, html {

    margin: 0;

    padding: 0;

    font-size: 3vw;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: url(https://placeimg.com/900/900/nature) center center fixed;

    background-size: cover;

}

main {

    width: 50%;

    padding: 5%;

    background: rgba(0,0,0,0.5);

    color: #FFF;

}

</style>

</head>

<body>

<main>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis fuga sunt quasi facilis, libero consequuntur mollitia rem sapiente voluptate quos vitae esse neque impedit est quam explicabo repellendus incidunt cupiditate.</p>

</main>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

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...
Aug 09, 2018 2
New Here ,
Aug 09, 2018

Copy link to clipboard

Copied

hey man, well the problem is that everything on the webpage has to be vertically responsivde but not horizontally.

intro

as u can see here, on the home page, the background is the video of the moose blinking, the blackboard is part of that video. everything has to stay centered and same scale as the background though.

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...
Aug 09, 2018 0
LEGEND ,
Aug 09, 2018

Copy link to clipboard

Copied

Nancy‘s contribution doesn‘t help you, if you are using Muse — as very often in these kinds of situations. Don‘t mind.

Just read this thread, it may be more useful: https://forums.adobe.com/message/4531004#4531004

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...
Aug 09, 2018 1
Adobe Community Professional ,
Aug 09, 2018

Copy link to clipboard

Copied

Add a compatible page background-color to give the illusion that it fills viewport height.    Currently, your background-color is white.

#muse_css_mq, .html {

    background-color: #9f754a;

}

Nancy O'Shea, ACP
Alt-Web.com

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...
Aug 09, 2018 0
LEGEND ,
Aug 09, 2018

Copy link to clipboard

Copied

A background colour doesn‘t help in this case, because the video shows different colors while playing. And if: Why using HTML code for applying a background colour in Muse? There is built in function for that.

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...
Aug 09, 2018 0
Adobe Community Professional ,
Aug 09, 2018

Copy link to clipboard

Copied

It's not a video.  It's animation.

The landing page uses JavaScript to redirect to a 2nd page (moose & chalkboard).   And yes, the code in my reply #4 is generated by Muse and specific to the moose & chalkboard page.  The landing page will need a different background color.  

Nancy O'Shea, ACP
Alt-Web.com

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...
Aug 09, 2018 0
Most Valuable Participant ,
Aug 09, 2018

Copy link to clipboard

Copied

Zeronix123  wrote

why can't the height just always be 100% ?

because you pinned it and set the resizing to none... the browser is trying to do what you told it to and that means something has to give so understand that this design will not work on small devices

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

Copy link to clipboard

Copied

Ussnorway  wrote

...this design will not work on small devices

I agree.   The animation must be scalable to fit all devices.

Animate CC: Responsive Canvas Scaling | Adobe Blog 

Nancy O'Shea, ACP
Alt-Web.com

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