6 Replies Latest reply on Jun 19, 2018 4:42 AM by ievao77820936

    Website elements are floating in browser

    ievao77820936

      Hello!

       

      I have problem, that all my elements are not browser width. Only the navigation is responsive and keep the browser width, the rest content is just floating between.

      I tried to find what is the problem, but could not find ( I deleted one element by one, to find it, but still it is the same).

      And it stops doing it around 750px. Above it is responsive, but this weird float thing.

       

      Attaching screenshots.

      1. should be like this :

      Screen Shot 2018-06-19 at 09.16.07.png

      2. But when I scroll down or move the mouse, suddenly I can scroll horizontally.

       

      Screen Shot 2018-06-19 at 09.15.59.png

       

      The hero image is image slideshow.

       

      Thanks!

        • 1. Re: Website elements are floating in browser
          Günter Heißenbüttel Adobe Community Professional

          Could you share a small(!!) .muse file with us? Delete everything, except one page and some „critical“ elements, save this .muse file under a new name, upload it to Dropbox, C Files or a similar service, and post the download link here. Then we can have a look.

          • 2. Re: Website elements are floating in browser
            ievao77820936 Level 1

            Thank you!

             

            Here is the dropbox link with muse file.

            problem_web

            • 3. Re: Website elements are floating in browser
              Günter Heißenbüttel Adobe Community Professional

              Puh, there are many, many layout issues – too much to resolve them within a forum post.

               

              Some general hint:

              • Please, try to understand exactly, how different elements are scaling and hoe rectangles react, when text is placed onto them. (They try to adapt the size of the text frame)
              • Text frames only scale horizontally and grow – if needed – vertically. Otherwise the text within couldn’t be displayed completely any more
              • Images scale proportionally (width and height)
              • Browser wide slide shows only scale horizontally.

              If you don’t take care of the scaling behaviour, the elements will run „out of place“, when resizing the browser window.

              One more problem are overlapping element or elements, which are placed completely onto other elements. The reason for issues, which are caused by this (and a solution) you can find here: https://forums.adobe.com/docs/DOC-9082

              Additionally:

              • You shouldn’t inspect your page not only breakpoint-wise, but use the scrubber (this grey handle to the right of the breakpoint bar to control, how elements are floating.
              • Situations with images to the left and text to the right of the image are much simpler solvable, if you use inline images: Copy the imag just like a word into the text frame and use the „Wrap“ panel to control the settings.
              1 person found this helpful
              • 4. Re: Website elements are floating in browser
                ievao77820936 Level 1

                Oh! That sounds bad, I'm new at muse. So exploring how it works.

                 

                Thank you for your points and try to fix the issues. Basically the element are the issue all together? Not just one?

                Yeah.. seems a bit confusing now for me, but thanks.

                • 5. Re: Website elements are floating in browser
                  Günter Heißenbüttel Adobe Community Professional

                  It IS confusing. Why?

                  On a responsive page every element influences the others: Push them down, lift them up, … Images scale down, when resizing the browser window, object below images slide upwards in this case. It is really heavy to control all page elements, so that they work perfectly.

                  If you are new to Muse, why

                  • trying to create a responsive site first? I’d start to learn Muse by building a fixed width site. In this case, you can layout as you would do in print layout.
                  • why trying to add 3rd party widget (for example the „Search“ widget), before creating the basic Muse site first. 3rd party widget often cause issues.
                  • 6. Re: Website elements are floating in browser
                    ievao77820936 Level 1

                    I found why it was floating, it was in navigation.

                     

                    I will experiment with the rest of the objects. thank you for the tips, they were useful and will help improve my work.

                     

                    I need responsive site for the client, that is why I am making it.

                     

                    Thank you!