Zoom out page CSS

Question

I have a website that works perfectly when I zoom out my browser to 50%. But it is very bad on normal size (100%). I already use transform and zoom on the CSS but not being what I wanted CSS. I cannot decrease font or image because of some reason. All I want is to just make this page look like I zoom out the browser 50%.

Thanks for all your help.

 <style type="text/css">
  .navbar-brand{

    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
  }
  .navbar-toggle {
    z-index:3;
  }
  .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  .dropdown {
    position: relative;
    display: block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {background-color: #f1f1f1}

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
   @media (min-width: 1025px)  {

    html {
     /* -webkit-transform: scale(2);
      -moz-transform: scale(2);
      transform: scale(2);*/
     /* transform: scaleX(1) scaleY(.5);*/
   }

  }
  @media (max-width: 600px) {
   #judul{
    visibility: hidden;
    display: none
  }
  #menu{
    display: none;
  }
  #menu-content{
    display: block;
    position: relative;
  }

  #logo{
    visibility: hidden;
    display: none;
  }
 </style>

Solution

You can use a non-css solution for this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport

But you can actually use CSS to zoom (but i dont recommend this for the entire page):

/* you can apply this on body aswell */
.zoomedElement {
  background-color: #CCF;
  zoom: 300%;
}

.scaledElement {
background-color: #FAC;
  transform: scale(1.2); /* scales in all directions, probably not what you want but worth mentioning */
}

<div class="zoomedElement">
  <h6>Heading Zoomed</h6>
  Some text...
</div>

<div class="scaledElement">
  <h6>Heading Scaled</h6>
  Some text...
</div>