Javascript 响应CSS:div太大

我正在尝试调整我的灯箱的大小。但当我使用最大宽度：100%时，图像对于PC屏幕来说太大了，对于手机来说太小了。相反，最大宽度为50%；（和）。我该怎么办

CSS:

HTML:

&时代；

您可以尝试：

#galeria.模态内容{
保证金：自动；
填充：20px；
}
/*手机屏幕宽度*/
@媒体屏幕和屏幕（最大宽度：600px）{
#galeria.模态内容{
最大宽度：100%；
}
}
/*大于电话宽度*/
@媒体屏幕和屏幕（最小宽度：601px）{
#galeria.模态内容{
最大宽度：50%；
}
}
<代码>有趣的公司名称：“如何使用媒体查询？这是一个葡萄牙语名称：FundaSoutho o助理Da PARAYBA B=帕拉巴的助教基金会。帕莱巴是巴西的一个州。这很好，我将阅读更多关于媒体查询的内容。谢谢
/* The Modal (background) */
#galeria .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
#galeria .modal-content {
    margin: auto;
    padding: 20px;
    max-width: 50%;

}

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

  <div class="close-button"><span class="close" id="close-sync">&times;</span></div>
    <div id="sync1" class="owl-carousel">
    <div class="item">
          <img src="assets/img/eventos/16-12-2016/01.JPG">
      </div>
    <div class="item">
          <img src="assets/img/eventos/16-12-2016/02.JPG">
      </div>
    </div>

    <div id="sync2" class="owl-carousel">
      <div class="item">
          <img src="assets/img/eventos/16-12-2016/01.JPG">
      </div>
    </div>

  </div>

</div>