Why is my website resizing different on computer and mobile?

Question

I have been working on a website for a school project, and added code for my tables to change size. As I was coding, I often resized my browser widnow to check the sizing on mobile. It looked great! When I actually opend the site on mobile, it was sized completelley differently. I have had problems with this code for a while. The sizing was not very responsive and margins were not working well. Here is the code (CSS):

.move{
}

 .table3 {
    position: absolute;
        left: 50%;
     transform: translate(-50%, -90%);
        border-collapse: collapse;
        width: 700px;
        height: 200px;
        border: 1px solid #bdc3c7;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }
    
    .tr {
        transition: all .2s ease-in;
        cursor: pointer;
    }
    
    .th,
    .td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    #top {
        background-color: rgb(98,98,98);
        color: rgb(255,255,98);
    }
    
    .h1 {
        font-weight: 900;
      font-size: calc(1.725rem + 2.3vw);
        text-decoration: underline;
        text-align: center;
        color: rgb(224,194,58);
        padding: 10px;
      margin-bottom: 250px;
      margin-top: 110px;
    }
      .h2 {
        font-weight: 900;
      font-size: calc(1.725rem + 2.3vw);
        text-decoration: underline;
        text-align: center;
        color: rgb(224,194,58);
        padding: 10px;
      margin-bottom: 200px;
      margin-top: 110px;
    }
    .tr:hover {
        background-color: #f5f5f5;
        transform: scale(1.02);
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }
    
    @media only screen and (max-width: 768px) {
        .table3 {
            width: 90%;
           transform: translate(-50%, -70%);
        }
      .h1{
        margin-bottom: 370px;
      }
       .h2{
        margin-bottom: 240px;
      }
    }

    @media only screen and (max-width: 468px) {
        .table3 {
            width: 90%;
           transform: translate(-50%, -90%);
        }
      .h1{
        margin-bottom: 370px;
      }
       .h2{
        margin-bottom: 240px;
      }
    }

Here is my HTML:

<div class="move">  <h1 class="h1">Cost Overview</h1>

    <table class="table3">
        <tr class="tr" id="top">
           <th class="th">Step</th>
            <th class="th">Service</th>
            <th class="th">Provider</th>
            <th class="th">Average Cost</th>
        </tr>
        <tr class="tr">
            <td class="td">1 </td>
            <td class="td">Drivers Education Course </td>
            <td class="td">Varies </td>
            <td class="td">$25 - $60 </td>

        </tr>
        <tr class="tr">
            <td class="td">2 </td>
            <td class="td">Permit Exam </td>
            <td class="td">California DMV </td>
            <td class="td">$37 </td>

        </tr>
        <tr class="tr">
            <td class="td">3 </td>
            <td class="td">Behind The Wheel Class </td>
            <td class="td">Varies </td>
            <td class="td">$350 - $650 </td>

        </tr>
        <tr class="tr">
            <td class="td">4 </td>
            <td class="td">Practice Driving </td>
            <td class="td">Lisenced Driver 25+ Years Old</td>
            <td class="td">$0 </td>

        </tr>
        <tr class="tr">
            <td class="td">5 </td>
            <td class="td">Behind The Wheel Exam </td>
            <td class="td">California DMV </td>
            <td class="td">$0 - $7 </td>

        </tr>

    </table>
  </div>

I am open to anything, is there a way to make the table automatically have a margin of 20px between the sides and writing?

Answer 1

the reason is the use of margin. You should use height property instead of margin. You can use DisplayFlex for layout and any amount of padding. For example:

.h1{
  height: 400px;
  padding-top: 250px;
  font-weight: 900;
  font-size: calc(1.725rem + 2.3vw);
  text-decoration: underline;
  text-align: center;
  color: rgb(224, 194, 58);
}
@media only screen and (max-width: 768px){
  .h1 {
    height: 300px;
    padding-top: 150px;
  }
}

<h1 class="h1">Cost Overview</h1>

This is the easiest way to solve your problem. I suggest you to definitely study display flex and grid.

Answer 2

You can use this edited CSS code to solve your problem. I removed .h2 as it's not used in the HTML.

            .move {
                position: absolute;
                left: 50%;
                top: 80%;
                transform: translate(-50%, -90%);
            }

            .table3 {

                border-collapse: collapse;
                width: 100%;
                height: 200px;
                border: 1px solid #bdc3c7;
                box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
            }

            .tr {
                transition: all .2s ease-in;
                cursor: pointer;
            }

            .th,
            .td {
                padding: 12px;
                text-align: left;
                border-bottom: 1px solid #ddd;
            }

            #top {
                background-color: rgb(98, 98, 98);
                color: rgb(255, 255, 98);
            }

            .h1 {
                margin-top: 20px;
                font-weight: 900;
                font-size: calc(1.725rem + 2.3vw);
                text-decoration: underline;
                text-align: center;
                color: rgb(224, 194, 58);
                padding: 10px;

            }
            .tr:hover {
                background-color: #f5f5f5;
                transform: scale(1.02);
                box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
            }

In this code, the main container (.move) position has been changed to absolute and centered using left: 50%;. You can adjust top: 80%; to your preference. Additionally, for better responsiveness across various screen sizes:

Utilize F12 for checking mobile sizes instead of manually resizing the window. Consider using Bootstrap or other CSS libraries for center-aligning content and improving the appearance of tables, etc.