Bootstrap table goes over screen edge on smartphone

Question

I am making my first laravel project using bootstrap (https://getbootstrap.com/) and I bumped into a problem with mobile devices.

I am using a bootstrap4 basic table, (not using responsive property is not the problem) and using small property does not help either.

When the website is loaded, it shows as in picture 1. Now to see whole table, I need to slide left, as in picture 2 or zoom out as in picture 3.

Can I force my site to zoom out as shown in pic 3 when loaded? Or make the table fit into the page like in picture 1, since my NAV wont scale? I need whole table to be visible right away, even if not readable and the user would zoom it himself.

I tried wrapping only the table in <div class="container"></div> and in .container-fluid too but neither would help.

Can anyone help me, please?

Thank you.

link to pic

code:

<div class="container">
      <h1>List</h1>
      <div class="row">
            <div class="dropdown">
                  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ request('aec') ? $aecs->find(request('aec'))->name : '' }}
                  </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" href="{{ route('ae.index') }}">Všetky</a>
                        @foreach ($aecs as $aec)
                        <a class="dropdown-item" href="{{ route('ae.index', ['aec' => $aec]) }}">{{ $aec->name }}</a>
                        @endforeach
                  </div>
            </div>
      </div>
</div>
<br>
<div class="container">
      <table class="table table-hover">
            <thead>
                  <tr>
                        <th scope="col" class="text-center align-middle">ID</th>
                        <th scope="col" class="text-center align-middle">Typ</th>
                        <th scope="col" class="text-center align-middle">Názov</th>
                        <th scope="col" class="text-center align-middle">Skratka</th>
                        <th scope="col" class="text-center align-middle">Pseudo ID</th>
                        <th scope="col" class="text-center align-middle">Fotografia</th>
                  </tr>
            </thead>
            <tbody>
                  @forelse ($aes as $ae)
                  <tr>
                        <th scope="row" class="text-center align-middle">
                              <a href="{{ $ae->path() }}">
                                    {{ $ae->AECategory->id . "." . $ae->id }}
                              </a>
                        </th>
                        <td class="text-center align-middle">{{ $ae->AECategory->name }}</td>
                        <td class="text-center align-middle"><a href="{{ $ae->path() }}">{{ $ae->name }}</a></td>
                        <td class="text-center align-middle">{{ $ae ->nickname }}</td>
                        <td class="text-center align-middle">{{ $ae->pseudo_id }}</td>
                        <td class="text-center align-middle">
                              <div class="gallery">
                                    <a data-fancybox="gallery"
                                          href="{{ $ae->image ? asset($ae->image->path) : '' }}">
                                          <img
                                          src="{{ $ae->image ? asset($ae->image->path025) : '' }}"
                                          class="img-fluid img"
                                          width="250"
                                          height="250"
                                          alt=""
                                          >
                                    </a>
                              </div>
                        </td>
                  </tr>
                  @empty

                  @endforelse
            </tbody>
      </table>
</div>

Answer 1

Try the viewport meta tag with initial-scale attribute. Give the initial-scale a value of 0.5 zoom. The page will be zoomed with a value given in the initial-scale attribute. Please note that this is only applicable for the initial load of the page.

<meta name="viewport" content="width=device-width, initial-scale=.5" />

This page will also give you more insights on page zoom.

Answer 2

wrap your html with a container, I don't know what you're calling your classes, since you didn't post it making it very difficult to help.

/*in css*/
    @media only screen and (min-width: 1000px){

.yourclasshere tagshere{
    width: 100% !important;
    }
}

here is an example of a class I have called wrapper and the code from css.

@media only screen and (min-width: 1000px){
    .wrapper{
        width: calc(100% - 32px);
        margin: 0 auto;
    }

Hope it helps, I'm new. Startet with code this week

So this should work for you if you add it to your css stylesheet.

/*whenever the screen size is less than 1000 pixels wide it runs the code inside*/
    @media only screen and (min-width: 1000px){
    .container{
/*sets the container width to 100% - 32 pixels, so you get 16pixel gap on both sides of the container*/
        width: calc(100% - 32px);
        margin: 0 auto;
    }

here is a great tutorial on doing it https://youtu.be/kbLfWKGVsMQ he also has other stuff, quite a nice channel