媒体视口三星S8 CSS

时间:2018-06-01 17:00:32

标签: html css html5 css3

我正在尝试修复由其他人创建的CSS(我从其他公司接管了当前客户的工作)

至于现在在我的网站上工作的一切,除了我的三星Galaxy S8。页脚不遵守规则。我已经推出了我能在网上找到的所有内容

@media only screen and (min-width: 360px) and (max-width: 767px) { 
/* Your Styles... */ 
}

但是当我在S8网站上访问时。我希望遵循的特定部分中的文字规则。 (部分是Footer-right2)

在iPad上,桌面除此之外它还可以工作。

有什么想法吗?

这是我的CSS:

@media and (min-width: 360px) and (max-width: 767px) {      
#footer .footer-wrapper .footer-right2 {
      text-align: center; 
      font-size: 0.5em;
    font-weight: 300;
    padding-left: 15px;
   margin:auto;
    max-width:200px;
      }
       #footer .footer-logo {
    display: inline-block;
     padding-left: 15px;
       margin:auto; } }

它正在为其他规模工作,所以这里有一个例子:

@media (max-width: 768px) {
  #header .header-wrapper {
    height: 85px; }
  #header .header-toggle-menu {
    position: fixed;
    top: 30px;
    right: 15px;
    z-index: 7000;
    display: block; }
    #header .header-toggle-menu span {
      display: block;
      width: 42px;
      height: 7px;
      border-radius: 3px;
      background-color: #1d1d1d;
      transition: background-color 0.175s linear; }
      #header .header-toggle-menu span + span {
        margin-top: 4px; }
  #header .header-menu {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 6000;
    padding: 7px;
    width: 300px;
    background-color: #08ab0f;
    padding-top: 85px;
    transform: translateX(300px);
    transition: transform 0.225s ease-in-out; }
    #header .header-menu a {
      display: block;
      padding: 7px;
      font-size: 0.85em;
      font-weight: 900;
      color: #ffffff;
      transition: none;
      background-color: #e13649;
      margin-bottom: 7px; }
      #header .header-menu a:hover, #header .header-menu a:focus {
        color: #ffffff; }
  #header.active .header-menu {
    transform: translateX(0); }
  #header.active .header-toggle-menu span {
    background-color: #ffffff; }
  #footer .footer-wrapper .form-message {

    top: 85px; }
        #footer .footer-wrapper .footer-right2 {
      text-align: center; 
      font-size: 0.5em;
    font-weight: 300;
    padding-left: 15px;
   margin:auto;
    max-width:200px;
      }
       #footer .footer-logo {
    display: inline-block;
     padding-left: 15px;
       margin:auto; }
  #page {
    padding-top: 85px; }
  .slider-container {
    height: 530px;
    background-color: #08ab0f; }
    .slider-container .slider-slides {
      height: 500px; }
      .slider-container .slider-slides .slides-item {
        position: relative; }
        .slider-container .slider-slides .slides-item .item-left, .slider-container .slider-slides .slides-item .item-right {
          position: absolute;
          top: 0;
          left: 0;
          right: auto;
          width: 100%;
          height: 100%; }
        .slider-container .slider-slides .slides-item .item-left {
          z-index: 100;
          background-color: rgba(0, 0, 0, 0.3);
          text-align: center; }
        .slider-container .slider-slides .slides-item .item-right {
          z-index: 50; }
    .slider-container .slider-navigation {
      position: absolute;
      bottom: 0; }
  .single-team_member .team-member-header {
    display: block;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap; }
    .single-team_member .team-member-header .header-image {
      padding: 0; }
      .single-team_member .team-member-header .header-image:before {
        content: '';
        display: block;
        padding-bottom: 56.75%; }
    .single-team_member .team-member-header .header-content {
      background-color: #1d1d1d;
      padding: 30px 15px; } }

0 个答案:

没有答案