Adding a simple <meta name="viewport" content="width=device-width, initial-scale=1"> should help add some scaling fixes.

You have many ways, two of them are :

Option 1: Pure CSS

By using @media you can determine browser size and write different CSS for different browser sizes

@media only screen and (min-width:768px){
   Selector{
       Prop: Value;
   }
}

Option 2:

You can use a responsive CSS library like Bootstrap and use its grid layout,

BS Considers every container element like every division as 12 columns and you can set different columns for different devices

<div class="col-12 col-md-6" ></div>

For example in this short code, i said my division should take all 12 possible columns of Bootstrap, BUT, it should take only 6 columns(half of the page) in medium devices (md) Which in bs(up to Version 5) are devices larger than 768px