移动设备上的高度问题

时间:2018-08-04 13:00:19

标签: css mobile

我有这张幻灯片会自动转换。有时,字幕文本的行长超过几行,例如,在移动设备上,这会增加幻灯片容器的大小,因此,如果您在过渡时将页面移到更远的地方,

此处的工作示例:https://www.assemblyresearch.co.uk/

我需要更改哪些内容才能停止它?谢谢!

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
    min-height:300px;
  display:inline-block;
}
  @media only screen and (max-width: 640px) {
  .slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
    min-height:none!important;
    }}

/* Hide the images by default */
.mySlides {
    display: none;
}


/* Title text */
.TitleText {
  color: #262626;
  font-size: 50px;
  font-weight:400;
  line-height:1.2em;
  width: 100%;
  text-align: left;
  padding-bottom:15px;
}

  @media only screen and (max-width: 640px) {
    .TitleText {
  color: #262626;
  font-size: 30px;
  font-weight:400;
  line-height:1.2em;
  width: 100%;
  text-align: left;
  padding-bottom:15px;
}
  }

  /* SubTitle text */
.SubTitleText {
  color: #262626;
  font-size: 30px;
  font-weight:100;
    line-height:1.3em;
  width: 100%;
  text-align: left;
}
  @media only screen and (max-width: 640px) {
  .SubTitleText {
  color: #262626;
  font-size: 20px;
  font-weight:100;
    line-height:1.3em;
  width: 100%;
  text-align: left;

    }}


/*arrow */
  .b-arrow-div {
    line-height:4em;
    width: 74.9px;
    position: relative;
    display: inline-block;

}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 20px 0 0;
  background-color: #bbb;
  border-radius: 50%;
  display:inline-block;
  transition: background-color 0.6s ease;
  margin-top:100px;
}
.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

0 个答案:

没有答案