7 Replies Latest reply on Jun 19, 2018 2:04 PM by Nancy OShea

    Making fluid page designs

    Temakixai

      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

        • 1. Re: Making fluid page designs
          fotoroeder Adobe Community Professional

          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

          • 2. Re: Making fluid page designs
            Temakixai Level 1

            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?

            • 3. Re: Making fluid page designs
              fotoroeder Adobe Community Professional

              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.

              1 person found this helpful
              • 4. Re: Making fluid page designs
                Temakixai Level 1

                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)

                • 5. Re: Making fluid page designs
                  ankushr40215001 Level 7

                  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

                  • 6. Re: Making fluid page designs
                    Temakixai Level 1

                    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.

                    • 7. Re: Making fluid page designs
                      Nancy OShea Adobe Community Professional & MVP

                      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>

                      1 person found this helpful