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

Making fluid page designs

Community Beginner ,
Jun 06, 2018 Jun 06, 2018

Copy link to clipboard

Copied

941bd39dfbf305a878f6c6862fc2bb19.png

So I have this site I'm trying to make. but I have spent months just trying to figure out how to do this.

Very tempted just to use iframes for the content and not have the main page move but I know this can be messy, and from what I see from almost all websites is having a long page of content is typically how things should be designed.

Muse doesn't seem to be very helpful towards responsive height. but like, isn't that the dimension that's going to be changing the most?

I know responsive width is so that the site can adjust itself based on the browser size, but I'm thinking purely in terms of things within Muse right now, from a construction standpoint. If I'm using a master page, how on earth do I make the design of the page adjust itself as I add content?

to be specific, what I mean is as I add content into the main section of the window there, It's going to be different on every page. Whenever you try to move or resize an object into the footer on Muse it automatically resizes the page right? But not what's ON the page already. If my content goes below the page then it will just go over the page and onto the background. I want all those blue boxes and things to stretch down, with the darker blue bar at the bottom staying in the footer below the content I'm adding.

Am I not supposed to have the whole design on the master page? I thought that was the whole point of master pages, so that it can all be consistent. I just need the boxes to move downwards as I put things on the page. I don't really want to have to be manually adjusting it on every page separately.

So is there any way to do that? so far I have spent months trying to figure this out and we NEED this site made. but I am just so stuck.

p.s not sure if it's better just to use the whole 'canvass' on Muse, experimented a little and not sure if this design would be easier to achieve what I want?

c9e25d79535ce88259f2ab96a3a42695.png

Views

606

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

Community Beginner , Jun 08, 2018 Jun 08, 2018

I had a play and I think I see what you mean about dragging the thing inside the page and creating a breakpoint.

But my problem was more how to get the vertical height of a page, and the "shape" of the page I've created, to change as I add content so that I always have this design, always with the same blue bar on the bottom and the same bars on the side stretched down

Basically to turn this 228373a95e0f573ae7fddeb4296e9010.png into this 691ffe95d41fafd0edb70cba1cf06a2a.png

but without having to manually change everything
That's what I'm asking. Whether that is possible

...

Votes

Translate

Translate
LEGEND ,
Jun 06, 2018 Jun 06, 2018

Copy link to clipboard

Copied

You may also need some breakpoints maybe? Your menu, stretched across the whole page won`t fit at least from mobile sizes around 960 or 768and may need to be replaced by a so called mobile menu. Don`t stick to the numbers, this is more like a common sense of using breakkpoints.

Another idea might be the usage of fixed width breakpoints instead of fluid width breakpoints.

There´s a lot of guessing and assuming in your question so why not show us your master so you can start to get more of an idea of what is possible.

But anyway, yes, master pages are good to keep some elements which should be on more than one page consistent and place page wide content on pages which are connected to the master(s).

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 ,
Jun 07, 2018 Jun 07, 2018

Copy link to clipboard

Copied

Thank you for the response

yeah I need to look more into breakpoints. They confused me a little. I suppose I probably should look at a tutorial for them or something

here is the master page

78851a4249d037764a7ae3a81afc9bf0.png

Are you saying I should only have some elements on the master page and others just copied across each page?

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 ,
Jun 07, 2018 Jun 07, 2018

Copy link to clipboard

Copied

You have to use this vertical grey bar on the right side inside design view and move it "inside". As soon as content "breaks", you rearrange elements, use that scrubber again and so forth.

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 ,
Jun 08, 2018 Jun 08, 2018

Copy link to clipboard

Copied

I had a play and I think I see what you mean about dragging the thing inside the page and creating a breakpoint.

But my problem was more how to get the vertical height of a page, and the "shape" of the page I've created, to change as I add content so that I always have this design, always with the same blue bar on the bottom and the same bars on the side stretched down

Basically to turn this 228373a95e0f573ae7fddeb4296e9010.png into this 691ffe95d41fafd0edb70cba1cf06a2a.png

but without having to manually change everything
That's what I'm asking. Whether that is possible.

Edit:
Okay, I found the one tiny button that locks the footer item (the dark bar) to the bottom of the page, so that it can actually stay in the footer.

that's one thing down.
Now I just want those blue bars and the semi-transparent blue background box to have their lowest point stay aligned to the top of the footer where they are so they resize with the page, (but not the top of them obviously)

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
Jun 12, 2018 Jun 12, 2018

Copy link to clipboard

Copied

I guess you need to play with sticky footers in this case, or maybe we are not clear what you are expecting.

Please share a screen shot of  your full screen showing footer tot us.

Thanks,

Ankush

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 ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

Sorry for the late reply, as I was away.

This is the best I could get of the screenshot.

screencap_muse.png

I don't know how better I can explain what I want, I've tried to be as clear as possible.

Muse can stretch the whole page down when you move an item past the bottom of the page, automatically alterign the page height and extending it downwards. I also want it to stretch the layout of my page, which includes these vertical banners and the semi-transparent blue background square.

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 Expert ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

LATEST

For what you want to do, you need CSS Flesbox.  Muse doesn't support Flexobx.

I did this quick responsive mockup in Dreamweaver with Bootstrap 4.  I then added a little bit of CSS Flexbox to force the footer to screen bottom  on short pages.

Desktop

Mobile

CODE:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 with Flexbox</title>

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

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

<!--Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

body {

min-height: 100vh;

padding-top: 25vh;

background: url(https://placeimg.com/1200/900/nature) no-repeat center center fixed;

background-size: cover;

}

.flex-grow { flex: 1; }

</style>

</head>

<body class="d-flex flex-column">

<!--BEGIN RESPONSIVE NAVBAR-->

<nav class="navbar navbar-dark navbar-expand-lg bg-info justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded"  src="https://dummyimage.com/300x65" alt="Your Logo" title="Company Logo or Brand"></a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">

<ul class="navbar-nav ml-auto">

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item"><a class="nav-link" href="#">Menu2</a></li>

<li class="nav-item"><a class="nav-link" href="#">Menu3</a></li>

<li class="nav-item"><a class="nav-link" href="#">Menu4</a></li>

<li class="nav-item"><a class="nav-link" href="#">Menu5</a></li>

</ul>

</div>

</nav>

<!--BEGIN MAIN CONTENT-->

<main class="container flex-grow">

<div class="row text-warning">

<div class="col">

<h1>Hello World!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos, distinctio.</p>

</div>

</div>

</main>

<!--BEGIN FOOTER-->

<footer class="bg-info text-white mt-4">

<div class="container-fluid py-3">

<div class="row">

<div class="col-md-4 text-center">

<h5>Footer Column 1</h5>

</div>

<div class="col-md-4 text-center">

<h5>Footer Column 2</h5>

</div>

<div class="col-md-4 text-center">

<h5>Footer Column 3</h5>

</div>

</div>

<div class="row">

<div class="col-md-6"> <small>Footer remains at page bottom on short pages.</small></div>

<div class="col-md-3"></div>

<div class="col-md-3 text-right small align-self-end"><small>©2018 XYZ Company</small></div>

</div>

</div>

</footer>

<!--latest jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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