ロゴの大きさは「688x96」と現在なっています
画面の右に余白ができてしまっています。
さっきからずっとトライしてますが、なかなか消えてくれません。
php
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 9</head> 10<body> 11 <footer class="footer pl-2 pr-2"> 12 <div class="footer-block"> 13 <div class="row"> 14 <!-- Footer Location--> 15 <div class="col-lg-4"> 16 <p class="company-name h4 text-title">hogehogehoge International Ltd.</p> 17 <p class="company-address h5 text"> 18 hogehogehoge 19 <br /> 20 hogehoge 21 <br /> 22 hogehoge 23 </p> 24 </div> 25 <!-- Footer Logo--> 26 <div class="col-lg-4 footer-logo"> 27 <a href="<?php echo home_url(); ?>"><img class="logo-image" src="<?php echo get_template_directory_uri(); ?>/img/logo-bottom.jpg" alt=""></a> 28 </div> 29 <!-- Footer About Text--> 30 <div class="col-lg-4 company-right"> 31 <p class="company-name h4 text-title">© <?php echo date("Y"); ?>hogehoge hogehogehoge<br> Ltd.</p> 32 <p class="contact-details h5"> 33 <a href="" class="text-dark">Email |</a> 34 <a href="#" class="text-dark">Phone | </a> 35 <a href="https://www.facebook.com/" class="text-dark">Facebook</a> <br> 36 <a href="" class="text-dark">Subscribe Newsletter</a> 37 </p> 38 </div> 39 </div> 40 </div> 41 </div> 42 </footer> 43 <script type="text/javascript" src="javascript.js"></script> 44 <?php wp_footer(); ?> 45 </body> 46 </html> 47 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 48<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 49<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 50</body> 51</html>
CSS
1 2/* Footer */ 3.footer { 4 padding-top: 1rem; 5} 6 7.row { 8 display:-ms-flexbox; 9 display: flex; 10 -ms-flex-wrap: wrap; 11 flex-wrap: wrap; 12 margin-right: 0px; 13 margin-left: 0px; 14 } 15 16.logo-image { 17 width: 80%; 18} 19 20.footer-logo { 21 margin-top: 5vw; 22} 23 24.company-right { 25 text-align: right; 26} 27 28/* footerのタブレット用CSS */ 29@media only screen and (max-width: 992px) { 30 .footer-block { 31 text-align: center; 32 } 33.logo-image { 34 width: 70%; 35} 36.footer-logo { 37 margin-top: 2vw; 38} 39.company-right { 40 text-align: center; 41} 42} 43 44/* footerのスマホ用CSS */ 45@media only screen and (max-width: 491px) { 46 .logo-image { 47 width: 90%; 48 } 49} 50
回答1件
あなたの回答
tips
プレビュー