CODEWITHSUNDEEP
htmlcss
Dryluigi
Dryluigi

Reputation: 35

HTML Content is pushed to the left on mobile browser

Hi I got an issue when running my project on mobile browser. The entire content (except navbar cause its absolute position) is pushed to the left.

Page on mobile device:


I've tried to run the project on mobile view (desktop browser) and got no issue. Any idea how to fix it?

Page on desktop browser

Edit: This is the main layout for the HTML

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Sinona</title>

        <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/icon/apple-touch-icon.png') }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/icon/favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/icon/favicon-16x16.png') }}">
        <link rel="manifest" href="{{ asset('assets/img/icon/site.webmanifest') }}">
        <link rel="mask-icon" href="{{ asset('assets/img/icon/safari-pinned-tab.svg') }}" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">

        <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
        <link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
        <link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </head>
    <body id="page-top">
        @include('landing.partials.navbar')
        <main class="main">
            @yield('content')
        </main>
        @include('landing.partials.footer')
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <script src="{{ asset('js/scripts.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/lazy_load.js') }}"></script>
        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
    </body>
</html>

I also use bootstrap and my own custom CSS. Since the code is pretty long, you can see it on these links, bootstrap (styles.css), https://snippet.host/gxop, my own (custom.css), https://snippet.host/eqzn

Edit 2: Since the abnormality appear on whole content, I assume the problem is related with the body or root main content. These are related css:
styles.css

...
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
...

custom.css

:root {
  --accent-1: #356f4a;
  --accent-2: #2a5333;
  --accent-3: #fbb41f;
}

.main {
  min-height: 80vh;
}

Upvotes: 1

Views: 1769

Answers (3)

Sowmiyan S
Sowmiyan S

Reputation: 11

ā€¢ Okay the problem why your website is pushed to the left is , you need to tell the browser to adjust the content size according to the screen size šŸ–„ļø.

ā€¢ THE SOLUTION :

    <meta name="viewport" 
    content="width=device-width">

ā€¢ You just need to add this code inside of your "head tag".

ā€¢ EXAMPLE :

 <!DOCTYPE>
 <html>
     <head lang="en" dir="ltr">. 
         <title>My Website</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
     </head>
     <body>

     </body>
 </html>

ā€¢ I hope this would solve your problem šŸ™‚, Have a great day šŸ‘, Bye.

Upvotes: 1

Dryluigi
Dryluigi

Reputation: 35

After decades of debugging, it's finally solved. Looks like the entrance animation for each component overlapping the screen and pushing whole content to the left. I already fixed it by making the the body hide the content when overflowing, 

overflow: hidden;

Upvotes: 0

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1144

I could be wrong about this but I thought, in the viewport meta-tag that shrink-to-fit not only prevents shrinking it prevents proper scaling. You could try removing that part just as a test to see what happens.

What I think is, somehwere on your page is an element which is too wide for the viewport (this could be because of horizontal margins or padding) or it is simply wider than everythign else on the page (not contained) and your shrink-to-fit is trying it's best.

This is just a guess.

Upvotes: 0

Related Questions