When the page loads, sometimes it happens like this, it stretches like a bud, it has a width of 200%, then everything becomes normal. Possible reasons:

  1. in the beginning of the page the block with svg is loaded

    <div style=" position: absolute; visibility: hidden; display:none; width: 0; height: 0;"> <svg></svg> </div>

To enable svg icons via use.

  1. Page has this structure

 body { overflow-y: scroll; overflow-x: hidden; } .main { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; } .header { background: #2f3234; margin-bottom: 10px; position: relative; z-index: 4; } .content { flex: 1 auto; } .footer { padding-top: 7px; color: #ffffff; } .row { margin: 0 -11px; display: flex; flex-wrap: wrap; align-self: stretch; align-content: stretch; } .column-1, .column-3 { padding: 0 12px; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; align-self: stretch; } .column-2 { order: inherit; width: auto; margin-bottom: 0; align-self: stretch; flex-shrink: 0; position: relative; } 
 <body> <div class="main"> <header></header> <div class="content"> <div class="row"> <div class="column-1"></div> <div class="column-2"></div> <div class="column-3"></div> </div> <div class="key"></div> </div> </div> <footer> </footer> </body>

Is it possible because of these styles?

3) The page is given through handel bars is it possible to spread because of it?

  • I doubt very much that with such an example and description, it is possible to understand something and get a clear answer and help .... I have vague suspicions that the cause of the SVG problem ... - Air

1 answer 1

Try explicitly setting the width for the body:

 body { width:100%; overflow-y: scroll; overflow-x: hidden; }