Когда я открываю модальный на мобильном телефоне, размер шрифта становится больше - PullRequest
Новая
       7

Когда я открываю модальный на мобильном телефоне, размер шрифта становится больше

0 голосов
/ 26 марта 2020

У меня странная проблема. Я сделал этот модальный, чтобы работать как полный экран о странице. Это не создает никаких проблем на рабочем столе, однако, когда я нажимаю его на мобильном телефоне, сам модал выглядит нормально, но затем я удаляю его, и некоторые шрифты становятся больше.

Я связал фрагмент выполнения, чтобы вы могли проверить его для себя, однако это проблема только для мобильных устройств. Вы можете проверить это на странице моего сайта: www.giacomofagandini.com

Я не так хорош с js, поэтому я только попытался добавить / удалить классы, чтобы увидеть, где может быть проблема. Заранее спасибо 

const showDialog = () => {
  document.getElementById('dialog').classList.add('show');
};
const closeDialog = () => {
  document.getElementById('dialog').classList.remove('show');
};
*{margin: 0px; padding: 0px;}
html{font-size: 16px !important;}
ul, ol{ list-style: none;}
a, li{text-decoration: none !important;}
a img{border:none !important;}
body{font-family: Arial, Helvetica, sans-serif; font-size: 1em;}
header, footer, section, article, figure, aside, video, audio, hgroup, nav{display: block;}
.clear{clear: both;}
.left{float: left;}
.right{float: right;}
.block{display: block}

a { color: inherit; }

.works a{color: white;}
.intro-bottom a:hover{color: white;text-decoration: underline;}
.work-bottom a:hover{color: white;text-decoration: underline;}
.underline{text-decoration: underline !important;}


.modal-wrapper{
  width: 96vw;
  margin: 0 auto;
  position: relative;

}



html{
  background-color: #1c1c1c;
  overflow-y: scroll;
  overflow-x: hidden;
}

body{
  background-color: #1c1c1c;
  font-family:"AT Surt Extended";
  color: white;
}

nav{
  position: fixed;
  top: 2vw;
  width: 96vw;
  height: 25px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 997;
}

.about-nav{
  position: fixed;
  top: 2vw;
  width: 96vw;
  height: 25px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}

.logo{
  height: 100%;
}

.height-100{
  height: 100%;
}

#show {
  /* height: 100%; */
  cursor: pointer;
  /* padding: 0; */
}
#show,
#close {
  /* display: block; */
  /* height: 100%; */
  cursor: pointer;
}
#dialog {
  display: none;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  background-color: #1c1c1c;
  color: #fff;
}
#dialog.show {
  display: block;
}




/* INTRO CSS */

.wrapper{
  width: 96vw;
  margin: 0 auto;
  position: relative;
}


.noscroll{overflow: hidden;}
.sub-title{margin-bottom: 4.2vh;}


h1{font-weight: 100; font-size: 53px; line-height: 1.2em; display: inline-block;}
h2{font-weight: 100; font-size: 36.8px; line-height: 1.4em;}
h3{font-weight: 100; font-size: 25.6px; line-height: 1.4em;}
h4{font-weight: 100; font-size: 16px; }
.bold{font-weight: 300;}
.grey{color: #737373;}

.intro-wrapper{
  min-height: 100vh;
  box-sizing: border-box;
  display: block;
  margin-bottom: 8vh;
  position: relative;
  background-color: red;
}



.intro{
  padding-top: 31.5vh;
  min-height: 68.5vh;
}


.flex-intro{
  display: flex;
  flex-wrap: wrap;
}

.pres1{
  width: 63%;
  margin-right: 3%;
  min-width: 690px;
  max-width: 1200px
}
.pres2{
  min-width: 300px;
  width: 29%;
  height: 100%;
}

.intro-bottom{
  width: 100%;
  position: absolute;
  bottom: 1.5vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}



.intro-bottom ul{
  width: 48.9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.intro-bottom ul li{
  width: 30%;
  display: inline-block;
  font-size: 16px;
}
.intro-arrow{
  width: 45px;
  border-left: 1.5px solid white;
  border-right: 1.5px solid white;
  height: 100px;
  writing-mode: vertical-rl;
  overflow-y: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-bottom ul li:nth-child(4),
.intro-bottom ul li:nth-child(5)
{
  display: none;
}


/* ////////WORKS SECTION////// */

.works{
  padding-top: 8vh;
  padding-bottom: 8vh;
  box-sizing: border-box;
  border-top: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
  display: block;
}

.works-items{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-item{
  margin-bottom: 2.15%;
}


.flex-item:nth-child(1),
.flex-item:nth-child(3),
.flex-item:nth-child(4),
.flex-item:nth-child(6){
  margin-right: 2.15%;
}


.w12{
  width: 100%;
}

.w6{
  width: 48.925%;
}

.w5{
  width: 40.4%;
}

.w4{
  width: 31.9%;
}

.w3{
  width: 23.3%;
}

.works-img{
  width: 100%;
  height: 27vw;
  background-color: white;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 4;
  opacity: 0;
}

.flex-item:hover .overlay{
  opacity: 0.5;
  transition: 0.2s;
}

.title-work{
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  box-sizing: border-box;
  padding-top: 10px;
  margin-bottom: 10px;
}

.work-section{
  width: 100%;
}

/* /////////////////// */

/* ////////   FOOTER  /////////// */
.footer-wrapper{
  min-height: 100vh;
  box-sizing: border-box;
  display: block;
  position: relative;
}

.info{
  position: relative;
  width: 100%;
  padding-top: 30vh;
  display: flex;
  flex-wrap: wrap;
}
.info section:nth-child(1) {
  padding-right: 11%;
  margin-bottom: 50px;
}

.info section:nth-child(2) {
  padding-bottom: 20vh;
}



/* INTRO ABOUT */

.about-intro{
  position: fixed;
  padding-top: 31.5vh;
  min-height: 100vh;
  width: 95%;
  box-sizing: border-box;
}

.about-intro-bottom{
  width: calc(100% + 2.387%);
  position: absolute;
  bottom: 1.5vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 999;
}

.about-intro-bottom ul{
  width: 48.9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.about-intro-bottom ul li{
  width: 30%;
  display: inline-block;
}



.about-content{
  position: relative;
  padding-top: 40vh;
  width: 51%;
  left: 42.5%;
  padding-bottom: 1.5vw;
}

.about-content h3{
  margin-bottom: 9.1vh;
  line-height: 1.3em; */
}

.about-content h4{
  /* padding-bottom: 3.5vh; */
  font-weight: 100;
  line-height: 1.3em;
}


/*
font-weight: 100;
line-height: 1.3em; */

.about-content-img-container{
  width: 100%;
  height: 897px;
  padding-top: 9.1vh;
  margin-top: 9.1vh;
  padding-bottom: 9.1vh;
  margin-bottom: 9.1vh;
  border-top: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
}

.about-content-img{
  width: 100%;
  height: 100%;
  background-color: white;
}

.about-height{
  position: relative;
  max-height: 1920px;
}


/* WORK TABS */

.work-info{
  padding-top: 31.5vh;
  padding-bottom: 31.5vh;
  display: flex;
  wrap: nowrap;
}
.work-intro{
  margin-right: 19.2%;
}
.work-intro ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 100;
  line-height: 1.3em;
  padding-top: 4.5vh;
}
.work-intro ul li{
  width: 42.1%;
  display: inline-block;
}
.work-intro ul li:nth-child(3){width: 15.8%;}
.work-description{padding-top: 6.5vh;}



.work-grid{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 30vh;
  border-bottom: 1.5px solid #737373;
  margin-bottom: 10.2vh;
}

.work-grid > section {
  line-height: 0;
  margin-bottom: 2.15%;
  height: 500px;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;

}

.work-bottom{
  width: 100%;
  padding-bottom: 3.5vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.work-bottom ul{
  width: 48.9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.work-bottom ul li{
  width: 30%;
  display: inline-block;
  font-size: 16px;
}



.next-prev-project{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20vh;
}

.left-arrow{
  width: 15.7%;
  height: 80%;
  margin-right: 5.3%;
  border-top: 1.5px solid white;
  border-bottom: 1.5px solid white;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-arrow{
  width: 15.7%;
  height: 80%;
  margin-left: 5.3%;
  border-top: 1.5px solid white;
  border-bottom: 1.5px solid white;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-project{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.next-prev-project h4{
  margin-bottom: 1vh;
}
.next-prev-project > section{
    width: 40.4%;
    display: flex;
    flex-wrap: wrap;
  }


.img-responsive {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0,-50%); */
}


/* Schermi inferiori di 1175 -> Tablet Grossi */

@media screen and (max-width: 1175px) {
  body {
  }

  .sub-title{margin-bottom: 20px;}

  .wrapper{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .modal-wrapper{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  nav{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    top: 20px;
    box-sizing: border-box;
  }

  .about-nav{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    top: 20px;
    box-sizing: border-box;
  }

  .about-content{padding-top: 38vh;}


  h1{font-weight: 100; font-size: 46.4px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 33.6px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 20.8px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 16px; }
  .pres2{min-width: 600px; max-width: 600px;}
  .flex-item{
    margin-bottom: 40px;
  }
  .pres1{padding-bottom: 30px; width: 80%; max-width: 690px;}
  {padding-top: 25.5vh;}
  -bottom{bottom: 20px;}
  .w3{width: calc(50% - 10px);}
  .w4{width: calc(50% - 10px);}
  .w5{width: calc(50% - 10px);}
  .w6{width: calc(50% - 10px);}
  -bottom ul{width: 70%;}

  .flex-item:nth-child(odd){margin-right: 20px;}
  .flex-item:nth-child(even){margin-right: 0;}

}

/* ABOUT BREAKPOINT */
@media screen and (max-width: 1040px) {
  .about-intro{position: relative; min-height: 20vh; margin-bottom: 50px;}
  .about-intro ul{display: none;}
  .about-content{left: 0; padding-top: 0; width: 100%;}

}


@media screen and (max-width: 768px) {
  html{
    overflow-x: hidden !important;
  }
  body{
  }

  h1{font-weight: 100; font-size: 44.8px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 32px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 20.8px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 16px; }
  .intro-arrow{display: none;}
  .pres1{max-width: 690px; min-width: 500px;}
  .pres2{min-width: 400px; max-width: 700px; margin-bottom: 0;}
  .intro{padding-top: 20vh;}
  .w3{width: 100%;}
  .w4{width: 100%;}
  .w5{width: 100%;}
  .w6{width: 100%;}
  .flex-item{margin-right: 0;}
  .works-img{height: 400px;}
  .intro-bottom ul{width: 90%;}
}

  @media screen and (max-width: 500px) {
    html{overflow-x: hidden !important;}

    h1{font-weight: 100; font-size: 30.4px !important; line-height: 1.2em; display: inline-block;}
    h2{font-weight: 100; font-size: 22.4px !important; line-height: 1.4em;}
    h3{font-weight: 100; font-size: 18px !important; line-height: 1.35em;}
    h4{font-weight: 100; font-size: 12.8px !important; }
    .intro
    .pres1{max-width: 310px; min-width: 200px; width: 100%;}
    .pres2{max-width: 90%; width: 100%; min-width: 90%;}
    .intro-arrow{display: none;}
    .intro-bottom{bottom: 91px;}
    .footer-wrapper .intro-bottom{bottom: 20px;
    }
    .w3{width: 100%;}
    .w4{width: 100%;}
    .w5{width: 100%;}
    .w6{width: 100%;}
    .flex-item{margin-right: 0;}
    .works-img{height: 400px;}
    .intro-bottom ul li{
      width: 50%;
    }
    .intro-bottom ul li:nth-child(1),
    .intro-bottom ul li:nth-child(2),
    .intro-bottom ul li:nth-child(3)
    {display: none;}

    .intro-bottom ul li:nth-child(4),
    .intro-bottom ul li:nth-child(5)
    {display: block;}

    .intro-wrapper{margin-bottom: 0; padding-bottom: 0;}
    .works{padding-top: 20px;}
    .footer-wrapper{
      display: flex;
      align-items: center;
      height: 100vh;
    }
    .info{
      padding-top: 0;
    }
    .info section:nth-child(2) {
      padding-bottom: 0;
    }


}
  <nav>
    <div class="logo">
      <a href="#">
        <svg class="logo-svg" height="100%" xmlns="http://www.w3.org/2000/svg" data-name="Livello 1" viewBox="0 0 790 700"><defs><style>  .cls-1{fill:#ffffff;}</style></defs><title>  Logo Giacomo Fagandini [Recuperato]</title><polygon class="cls-1" points="212.8 60.6 0 144.5 0 183.9 0 183.9 0.1 650.2 0 650.3 0 689.7 0.1 689.7 0.1 689.7 153.9 629.1 153.9 629 366.6 545.2 366.6 538.3 366.6 505.8 366.6 308.1 366.6 308.1 366.6 308.1 233.9 360.4 212.8 368.7 212.8 368.7 183.3 380.3 183.3 419.7 212.8 408.1 212.8 566.4 153.9 589.6 153.9 123.3 212.8 100 212.8 236 366.6 175.4 366.6 39.4 366.6 0 212.8 60.6 212.8 60.6"/><polygon class="cls-1" points="775.2 144.5 775.1 144.5 775.1 144.2 621.4 83.6 621.4 83.9 562.4 60.6 562.4 60.6 408.7 0 408.7 39.4 408.7 538.3 562.4 599 562.4 408.9 775.1 492.7 775.1 453.3 562.4 369.5 562.4 100 621.4 123.3 621.4 247.4 775.1 308.1 775.1 183.9 775.2 183.9 775.2 144.5"/></svg></a>
    </div>
    <section id='show' class="height-100" onClick='showDialog()'>
        <img height="85%" src="./assets/img/info-button.svg">
    </section>
  </nav>
  <div id='dialog'>
      <section class="about-nav">
        <svg id='close' class="height-100" onClick='closeDialog()' height="100%" xmlns="http://www.w3.org/2000/svg" data-name="Livello 1" viewBox="0 0 790 700"><defs><style>  .cls-1{fill:#ffffff;}</style></defs><title>  Logo Giacomo Fagandini [Recuperato]</title><polygon class="cls-1" points="212.8 60.6 0 144.5 0 183.9 0 183.9 0.1 650.2 0 650.3 0 689.7 0.1 689.7 0.1 689.7 153.9 629.1 153.9 629 366.6 545.2 366.6 538.3 366.6 505.8 366.6 308.1 366.6 308.1 366.6 308.1 233.9 360.4 212.8 368.7 212.8 368.7 183.3 380.3 183.3 419.7 212.8 408.1 212.8 566.4 153.9 589.6 153.9 123.3 212.8 100 212.8 236 366.6 175.4 366.6 39.4 366.6 0 212.8 60.6 212.8 60.6"/><polygon class="cls-1" points="775.2 144.5 775.1 144.5 775.1 144.2 621.4 83.6 621.4 83.9 562.4 60.6 562.4 60.6 408.7 0 408.7 39.4 408.7 538.3 562.4 599 562.4 408.9 775.1 492.7 775.1 453.3 562.4 369.5 562.4 100 621.4 123.3 621.4 247.4 775.1 308.1 775.1 183.9 775.2 183.9 775.2 144.5"/></svg>
        <section id='close' class="height-100" onClick='closeDialog()'><img height="85%" src="./assets/img/info-button.svg"></section>
      </section>
      <section class="modal-wrapper">
        <section class="about-intro">
          <h4 class="grey sub-title">ABOUT ME</h4>
          <h1><span class="bold">Since you asked</span><br>(Did you?)</h1>
          <section class="about-intro-bottom">
            <ul class="grey">
              <li>Giacomo<br>Fagandini</li>
              <li>2020<br>Portfolio</li>
              <li></li>
            </ul>
          </section>
        </section>
        <section class="about-content">
          <h3>I'm Giacomo, a designer living in Parma & actually open for new opportunities. If you can get past my cynical humor and my "not-so pass the aux" musical taste i can be a pretty good person to have around. Previously i've worked at Saatchi & Saatchi as an Art Director Intern, i graduated in Graphic Design at NABA and i like closing my sentences in a questionable way.</h3>
          <section class="about-content-img-container">
            <section class=about-content-img></section>
          </section>
          <h3>giacomo.fagandini@yahoo.it<br><a class="underline" href="http://www.behance.net/giacomofagandini" target="_blank">Behance</a> – <a class="underline" href="http://www.instagram.com/giacomofagandini" target="_blank">Instagram</a> – <a class="underline" href="https://www.linkedin.com/in/giacomo-fagandini/" target="_blank">Linkedin</a></h3>
          <h4 class="grey">Site made from scratch and typeset in Surt.<br>All work © Giacomo Fagandini 2020  Infinity and beyond.</h4>
        </section>
      </section>
    </div>
...