New to HTML - site resize with varying screen sizes

[Erratic]

Hi everyone.

I've been toying around, googling, etc. with a little project at work. It's a kiosk of sorts for users to walk up and look up various information that they would otherwise have to go to different network drives and locations, or even other employees to pull up.

It works for the most part. Everyone likes it, but there are a few things that bother me with it.

It uses iframes to display info inside of a frame that has menu buttons on the left side, and depending on where they are on the site, can also have menu buttons on the bottom.

I'm assuming it's a CSS issue.

One issue:

depending on screen resolution, the page does not display properly. When I designed it, I designed it for screens that are full HD (1920x1080). Everything shows up beautifully (in my eyes). on iPads, everything shows up as well because the ipads have a higher resolution. iPhones, Android phones, and some laptop screens (that are still 1366x768) will have scroll bars.

Is there a proper way so the site will resize to maintain a ratio so there are no scroll bars?

See attached screenshots.

This is full screen on a laptop (or Touchscreen TV).




If a user is not using their web browser in full screen (or if they are on a laptop with a sub-HD screen), it'll look something like this, with the menu bar/buttons getting partially cut off.



Same issue if viewed on an iPhone:


On an iPad, everything looks fine (as far as I'm concerned):


Now I'm sure I'm doing my CSS incorrectly, as it's several pages long to incorporate various screen sizes of mobile devices. It pertained mainly to the width of the menu so it didn't get cut off. Here's a snippet:

/* ----------- iPhone 13, 13 Pro ----------- */

/* Portrait and Landscape */

@media only screen
  and (min-device-width: 390px)
  and (max-device-width: 844px)
  and (-webkit-min-device-pixel-ratio: 3) {
     .mobileShow { display: inline;}

}

/* Portrait */
@media only screen
  and (min-device-width: 390px)
  and (max-device-width: 844px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
     .mobileShow { display: inline;}

.box{
    width:79%;
    float:left;
position: relative;
}

.menu{
    width:21%;
    float:left;
position: relative;
}

}

/* Landscape */
@media only screen
  and (min-device-width: 390px)
  and (max-device-width: 844px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
     .mobileShow { display: inline;}

.box{
    width:88%;
    float:left;
position: relative;
}

.menu{
    width:12%;
    float:left;
position: relative;
}

}

/* ----------- Samsung Galaxy XCover Pro ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 7680px)
  and (-webkit-min-device-pixel-ratio: 4) {
  .mobileHide { display: none;}
    .box{
    width:79%;
    float:left;
position: relative;
}

.menu{
    width:21%;
    float:left;
position: relative;
}
}

/* Portrait */
@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 780px)
  and (-webkit-min-device-pixel-ratio: 4)
  and (orientation: portrait) {
  .mobileHide { display: none;}
    .box{
    width:79%;
    float:left;
position: relative;
}

.menu{
    width:21%;
    float:left;
position: relative;
}
}

/* Landscape */
@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 780px)
  and (-webkit-min-device-pixel-ratio: 4)
  and (orientation: landscape) {
  .mobileHide { display: none;}
    .box{
    width:79%;
    float:left;
position: relative;
}

.menu{
    width:21%;
    float:left;
position: relative;
}
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

     .mobileShow { display: inline;}
}

/* Portrait */
@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

     .mobileShow { display: inline;}

.box{
    width:90%;
    float:left;
position: relative;
}

.menu{
    width:10%;
    float:left;
position: relative;
}
}

/* Landscape */
@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

     .mobileShow { display: inline;}

.box{
    width:92%;
    float:left;
position: relative;
}

.menu{
    width:8%;
    float:left;
position: relative;
}
}