Responsive scroll issue

Discussion in 'General Muse' started by giant551, Jun 14, 2016.

  1. giant551

    giant551 New Member

    3
    0
    Hi everyone hope you are well.
    I have just started my first muse website and seem to have a bit of a problem... I am building a simple one page website and have started to set up the responsive positioning. The problem i have is that when i view the site in chromes ipad simulator or my ipad the site scrolls down but there is a horizontal movement as well. Its like the site it too big for the browser and its added horizontal scrolling? I did some looking around and it seems one of the causes is if you have a element off the canvas it can cause horizontal scrolling.

    I have double checked the file and i can't see anything which is not positioned in the document incorrectly.... Also i have re-positioned all the elements in the breakpoints...

    Its driving me mad.... its must be something simple i am missing?

    Thanks for your help

    Paul
     
  2. asifnm

    asifnm Well-Known Member

    117
    26
    Paul, if you are happy that nothing resides off the canvas then use the following code (just go to Object> Insert HTML) It will remove horizontal scroll bars and stop horizontal scrolling:

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css">

    <style>
    body
    {
    overflow-x:hidden;
    }
    </style>

    <script>
    $(function() {

    var $body = $(document);
    $body.bind('scroll', function() {
    // "Disable" the horizontal scroll.
    if ($body.scrollLeft() !== 0) {
    $body.scrollLeft(0);
    }
    });

    });
    </script>
     
    giant551 likes this.
  3. Chewbacca

    Chewbacca New Member

    4
    1
    Hi there,

    You dont need to insert any code to fix this..

    I know exactly what this is and it drove me crazy for a few hours aswell until I found a fix.

    This is what is happening.. You think you find everything from outside the canvas and put it back inside and then you test it again and it still stuffs up..

    The best example of fixing this is.. Just say you have a breakpoint at 600 and one at 450, everything on those exact breakpoints is on the canvas, but this is where it stuffs up - try dragging the breakpoint tool that simulates browser width inwards from 600px to 450px and look for anything that starts to fall off the page. An element at a 600px breakpoint on your canvas will definitely start to start to move off when it starts to get closer to 450px if its too big for the screen size at 460px or not pinned to the center.. I found a couple of things that started to fall off when I got closer to the smaller breakpoint and I Just made them smaller and pinned them to the center so they didn't move off..

    And it was fixed..

    Hope that helps.
     
    giant551 likes this.
  4. giant551

    giant551 New Member

    3
    0
    You have hit the nail on the head! I even started a new page and added individual elements back on the page until it broke..... It drove me crazy too.... Thanks very much guys for your help! I still have a lot to learn with Muse!
     
  5. Jeremei

    Jeremei Well-Known Member

    743
    95
    Paul!
    Have you checked that on the site/pages there are not elements which have been pinned in a wrong way? Wrongly pinned elements can cause horizontal scrolling.
     
  6. giant551

    giant551 New Member

    3
    0
    Ok after I have come to a conclusion.... using the flluid layouts for phones is an utter pain....Some work others don't.... I think its got to be easier using the old way and have 3 layouts....
     
  7. asifnm

    asifnm Well-Known Member

    117
    26
    You can still create a site which is a hybrid. Start the site as a fluid site, Then create a desktop breakpoint at say 1200px, a tablet at say 768px and a mobile at 380px. Then set these breakpoints to be fixed. This will work like the old 3 layouts way but you will only have one file to manage as all the content will be one html file.
     
  8. Sarah

    Sarah Well-Known Member

    132
    9
    @asifnm,

    Can I ask you more about this Hybrid style? I'm about to start a complicated website and I am growing weary and very grey with trying the responsive route - it's making my projects come in way over budget (and I have to eat the cost).

    So with the hybrid approach, I'm assuming I make all elements of each fixed BP non-responsive? Also, do you use synchronized text between the breakpoints so you only have to make updates in one BP, or....? Are there any other tips or tricks you could share? Do you still prefer this method?

    Thanks so much for any insight!
     
  9. asifnm

    asifnm Well-Known Member

    117
    26
    Start your site as . fluid site at your largest breakpoint 1200 is ok. Then create all of your content and have it all as non-responsive. Once all the content has been added you create the next breakpoint down 768px and if needed arrange elements to fit. Do the same with the final breakpoint at 380px and again arrange content to fit. Make sure that all breakpoints are fixed. Make sure that master pages are also fixed. That's it. All elements will be automatically synchronised so no need to worry about it.

    Responsive is really not that difficult you just have to make sure to add all content first before creating new breakpoints. All the sites we create are responsive as we are now used to the workflow.
     
  10. Sarah

    Sarah Well-Known Member

    132
    9
    Thanks for the tips! And I think/hope the nice part is that you can then use the motion effects...

    (I have been designing and adding all content for each page before doing the responsive bit, but some elements shoot up or down so often/quickly that it REALLY influences the design, or how you can design, often very detrimentally to the design).
     

Share This Page