Нижний колонтитул на основе начальной загрузки 4 и отзывчивости - PullRequest
Новая
       3

Нижний колонтитул на основе начальной загрузки 4 и отзывчивости

0 голосов
/ 09 июня 2018

Этот нижний колонтитул идеально подходит для мобильных устройств (устройства для iOS и Android) также для настольных ПК, но у планшета есть некоторые проблемы, особенно в правой панели!Как я могу оптимизировать отзывчивость для планшетных устройств?Есть идеи?

Заранее спасибо. 

.mainfooter-area {
  background: #404044;
  padding: 150px 0;
}

.mainfooter-area h2 {
  color: #ffffff;
  font-family: "TrebuchetMS", sans-serif;
  font-size: 24px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .mainfooter-area h2 {
    color: #ffffff;
    font-family: "TrebuchetMS", sans-serif;
    font-size: 20px;
    margin-bottom: 1em;
    letter-spacing: 1px;
  }
}

@media (max-width: 991px) {
  .mainfooter-area {
    padding: 50px 0;
  }
}

.ll-footer-about {
  position: relative;
}

.ll-footer-about:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 10%;
  top: 20%;
  width: 1px;
  height: 80%;
}

.ll-footer-about p {
  width: 75%;
  text-align: justify;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
}

@media (max-width: 991px) {
  .ll-footer-about {
    margin-bottom: 50px;
  }
}

.ll-footer-ourcompany,
.ll-footer-faq {
  position: relative;
}

.ll-footer-ourcompany:after,
.ll-footer-faq:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 10%;
  top: 20%;
  width: 1px;
  height: 80%;
}

.ll-footer-ourcompany a,
.ll-footer-faq a {
  position: relative;
  display: block;
  color: #8b8b8b;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 2px;
}

.ll-footer-ourcompany a::before,
.ll-footer-ourcompany a::after,
.ll-footer-faq a::before,
.ll-footer-faq a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.ll-footer-ourcompany a::before,
.ll-footer-faq a::before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.ll-footer-ourcompany a::after,
.ll-footer-faq a::after {
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.ll-footer-ourcompany a:hover::before,
.ll-footer-ourcompany a:hover::after,
.ll-footer-ourcompany a:focus::before,
.ll-footer-ourcompany a:focus::after,
.ll-footer-faq a:hover::before,
.ll-footer-faq a:hover::after,
.ll-footer-faq a:focus::before,
.ll-footer-faq a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.ll-footer-ourcompany a:hover,
.ll-footer-faq a:hover {
  text-decoration: none;
  color: #ffffff;
}

@media (max-width: 991px) {
  .ll-footer-ourcompany::after,
  .ll-footer-faq::after {
    border-right: none;
  }
  .ll-footer-ourcompany {
    margin-bottom: 50px;
  }
  .ll-footer-faq {
    margin-bottom: 50px;
  }
}

.ll-footer-newsletter p {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  margin-bottom: 2em;
}

.ll-subscription {
  max-width: 300px;
  display: block;
}

@media (max-width: 768px) {
  .ll-subscription {
    max-width: 300px;
    display: block;
    padding-bottom: 20px;
    margin: auto;
  }
}

.ll-subscription form {
  font-family: "Roboto", sans-serif;
  border-radius: 30px;
}

.ll-subscription form button {
  border: none;
  font-size: 25px;
  padding: 3px 15px;
  /*gradient*/
  background: #ca4989;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 1px #404044;
  box-shadow: 0 0 1px #404044;
}

.ll-flex {
  align-items: center;
  display: flex;
}

.ll-subscription form input {
  padding: 10px;
  height: 43px;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: #646F79;
  font-size: 14px;
  border: 1px solid #8b8b8b;
  border-right: none;
  width: 100%;
  background: transparent;
}

.ll-subscription form input:focus {
  outline: none;
}

.ll-socialmedia {
  margin-top: 30px;
  max-width: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.ll-socialmedia a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
}

.ll-socialmedia a:hover {
  text-decoration: none;
}

.ll-socialmedia a.social-facebook {
  /*gradient*/
  background: #2156C2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-twitter {
  /*gradient*/
  background: #1B95E0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-instagram {
  /*gradient*/
  background: #DD4B3E;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-googleplus {
  /*gradient*/
  background: #F90731;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-pinterest {
  /*gradient*/
  background: #BD0A1D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

@media (max-width: 768px) {
  .ll-socialmedia {
    display: flex;
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 1200px) {
  .ll-footer-about {
    position: relative;
  }
  .ll-footer-about:after {
    content: '';
    border: 0;
    position: absolute;
    right: 0;
    top: 20%;
    width: 0;
    height: 0;
  }
  .ll-footer-about p {
    width: 100%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="mainfooter-area">
  <div class="container-fluid">
    <div class="row mx-md-5">

      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-about text-center text-md-left">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi aut cumque eligendi exercitationem molestiae molestias natus nisi odio officia perspiciatis quo repellendus saepe soluta sunt suscipit, tenetur! Commodi, distinctio.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus, odit tempora ullam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ipsam. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Placeat, quas!
          </p>
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-ourcompany text-md-left text-center pl-0">
          <h2>Our Company</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-faq text-md-left text-center pl-0">
          <h2>Help and Faq</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-md-left text-center">
        <h2>Subscribe</h2>
        <div class="ll-footer-newsletter">
          <p>Subscribe to get the latest news, update and offer <br/> information. Don't worry, we won't send spam!
          </p>

          <!--Footer Newsletter Subscription-->
          <div class="ll-subscription">
            <form autocomplete="off" action="/subscribe" method="post">
              <div class="ll-flex">
                <div style="flex: 1 1 0%;">
                  <input type="email" name="email" placeholder="john@example.com">
                </div>
                <div style="margin-left: -20px;">
                  <button type="submit" disabled="disabled">&#8594;</button>
                </div>
              </div>
            </form>
          </div>
          <!--End Footer Newsletter Subscription-->

          <!--Footer Social Media-->
          <div class="ll-socialmedia">
            <a class="social-facebook" href=""><i class="fa fa-facebook"></i></a>
            <a class="social-twitter" href=""><i class="fa fa-twitter"></i></a>
            <a class="social-instagram" href=""><i class="fa fa-instagram"></i></a>
            <a class="social-googleplus" href=""><i class="fa fa-google-plus"></i></a>
            <a class="social-pinterest" href=""><i class="fa fa-pinterest-p"></i></a>
          </div>
          <!--End Footer Social Media-->

        </div>
      </div>
    </div>


  </div>
</div>

1 Ответ

0 голосов
/ 09 июня 2018

Вы должны использовать для таргетинга на определенные устройства с известной шириной. 

@media (min-width:600px) and (max-width:961px)
...