【解決方法】レスポンシブ ホームページのヘルプ

[ad_1]

こんにちは基本的に私のウェブサイトはレスポンシブです
私が抱えている問題は、デスクトップ部分がすべてうまくいっていることです
しかし、モバイルなどにサイズ変更すると、衝突しますか?
誰かが助けてくれるかどうか疑問に思っていた

HTML
<pre><!DOCTYPE HTML>
<html lang="en">

  <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="./style.css">
    <link href="//db.onlinewebfonts.com/c/312b980d3cfe638ce7c139f0dd99e1e2?family=Future+Now" rel="stylesheet" type="text/css" />

  </head>

  <body>

    <!-- partial:index.partial.html -->
    <html>
      <title>Coolvibes|Reloaded</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://coolvibes-reloaded.com/w3.css">
      <link rel="stylesheet" href="http://coolvibes-reloaded.com/fonts.css">
      <link rel="stylesheet" href="http://coolvibes-reloaded.com/font-awesome.min.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">



      <div style="position:static; height:60px;">
        <img src="https://coolvibes-reloaded.com/images/logo.png" style="; top:-0px; right:-200px; width:200px; height:120px; border:none;" />
      </div>

      <div align="right">
        <div style="position:relative; height:60px;">
          <style type="text/css">
            .WimpyPlayerPopup453,
            .WimpyPlayerPopup453:hover,
            .WimpyPlayerPopup453:visited,
            .WimpyPlayerPopup453:link {
              font-size: 20px;
              background-color: #0029CF;
              position: relative;
              display: inline-block;
              overflow: hidden;
              padding-left: 1em;
              padding-right: 1em;
              margin: 0px;
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%;
              cursor: pointer;
              height: 2em;
              border-radius: 1em;
              -webkit-border-radius: 1em;
              -moz-border-radius: 1em;
              -ms-border-radius: 1em;
              -o-border-radius: 1em;
              border-style: solid;
              border-width: 1px;
              border-color: rgba(123, 126, 128, 1);
              box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.85px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
              -webkit-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
              -moz-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
              -ms-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
              -o-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), 0.852px 2.769px 3px rgba(0, 0, 0, 0.22817204301075278);
              white-space: nowrap;
              line-height: 1.9em;
              color: #fdfdfd;
              font-family: Arial, Helvetica, sans-serif;
              text-align: center;
              font-weight: normal;
              font-style: normal;
              text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
              -webkit-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.2px 6.7px #2e4a63;
              -moz-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
              -ms-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
              -o-text-shadow: -0.16px -1.16px 0.23597px rgba(0, 0, 0, 0.7), 0px 1.25px 6.7px #2e4a63;
              font-smooth: always;
              -webkit-font-smoothing: antialiased;
              text-decoration: none;
            }

            .WimpyPlayerPopup453:active {
              color: #cecece;
              background-color: #767676;
              border-color: rgba(26, 26, 26, 0.38);
              box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
              -webkit-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
              -moz-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
              -ms-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
              -o-box-shadow: inset 0.16px 0.28px 0.3px rgba(255, 255, 255, 0), inset -0.16px -0.28px 0.4px rgba(246, 246, 246, 0.3), inset 0px 0px 14px rgba(0, 0, 0, 0.4);
              text-shadow: none;
              -webkit-text-shadow: none;
              -moz-text-shadow: none;
              -ms-text-shadow: none;
              -o-text-shadow: none;
              text-decoration: none;
            }

          </style>
          <a class="WimpyPlayerPopup453" href="javascript:;" onClick="window.open('http://onlineradiobox.com/uk/urban8/player/?cs=uk.urban8&played=1&from_widget=1','wimpyPlayerPopupWindow','width=527,height=280')">ListenNow</a>
          <div class="fb-login-button" data-width="200 - 320 px" data-size="medium" data-button-type="login_with" data-layout="rounded" data-auto-logout-link="true" data-use-continue-as="true"></div>
          <style="position:relative; top:-0px; right:-200px; width:200px; height:120px; border:none;" />

        </div>
      </div>
      <div align="right">
        <div id="cc_tunein">
          <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.pls"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-pls.png" border="0" alt="Winamp, iTunes" title="Winamp, iTunes" /></a>
          <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.asx"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-asx.png" border="0" alt="Windows Media Player" title="Windows Media Player" /></a>
          <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.ram"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
          <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.qtl"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
        </div>
      </div>

      <div align="right"><a href="https://coolvibes-reloaded.com/register.html" target="_blank">DJ Register</a>








        <center>
          <div id="snow"></div>
          <p>You're Tuned To</p>
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

          <head>

            <title>Station Activity</title>

            <style type="text/css">
              td {
                font-size: 0.6em;
              }

              /* temporary for testing purposes */
              #NowOn {
                border: 0px solid black;
                font-size: 11.5px;
                font-family: future_now;
                color: #00bcd4;
                background: transparent;
                height: 65px;
                width: 350px;
                position: relative;
                top: -97px;


              }

            </style>

            <script type="text/javascript">
              /* NOT CURRENTLY USED
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();

var GMT = new Date().getTimezoneOffset();
var offsetGMT = +1 new Date().getTimezoneOffset()/01:00;
*/
              // Sun=0 1 2 3 4 5 Sat=6
              var DayOfWeek = new Array('Weekend', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Weekend');
              var NoShow = 'No Show Scheduled<br />for COOLVIBES';
              var DH = new Array(7);
              for (d = 0; d < 7; d++) {
                DH[d] = new Array(24);
                for (h = 0; h < 24; h++) {
                  DH[d][h] = '';
                }
              }
              DH[1][10] = 'Monday at 10 AM<br>AUTOMIX<br>with auto';
              DH[1][08] = 'Monday at 8 AM<br>Kayleys Theme<br>with kayley';
              DH[1][12] = 'Monday at 12 PM<br>with Levis show<br>Monday at Noon<br>No Genre';
              DH[1][14] = 'auto<br>with auto parrott<br>Monday at 2 PM<br>No Genre';
              DH[1][16] = 'No Show Name<br>with Katy Cox<br>Monday at 4 PM<br>Rap';
              DH[1][17] = 'The Greatest<br>with DJ Fresh<br>Monday at 5 PM<br>No Genre';
              DH[1][18] = 'Revolution Corner<br>with Randy Underwood<br>Monday at 6 PM<br>No Genre';
              DH[1][20] = 'Daily Affirmation<br>with DJ Hightower<br>Monday at 8 PM<br>No Genre';
              DH[1][22] = 'No Show Name<br>with David Doggett<br>Monday 10 to Midnight<br>No Genre';
              DH[1][23] = 'No Show Name<br>with David Doggett<br>Monday at 11 PM<br>No Genre';
              DH[2][20] = 'Jonzeys Show<br><br>Tuesday  8 PM to 10pm<br>Rock';
              DH[2][08] = 'Kayleys Theme<br>with Kayley<br>Tuesday at 8 AM<br>Rock';
              DH[2][16] = 'No Show Name<br>with Sweet Action Jackson<br>Tuesday at 4 PM<br>Rock';
              DH[2][20] = 'The Rock Hour<br>with Dan the Man<br>Tuesday at 8 PM<br>No Genre';
              DH[3][19] = 'Levis Show! Braap!<br>with DJ Levi<br>Wednesday at 7 PM<br>No Genre';
              DH[3][10] = 'Wfam Wednesdays<br>with DJ Fam<br>Wednesday at 10 AM<br>No Genre';
              DH[3][15] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday 3 to 5 PM<br>Classic Rock';
              DH[3][16] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday at 4 PM<br>Classic Rock';
              DH[3][22] = 'EZ Does It<br>with DJ EZ<br>Wednesday at 10 PM<br>Rap';
              DH[4][23] = 'All Request<br>with Groovy G<br>Thursday Noon to 1 AM<br>mix';
              DH[4][22] = 'Request Show<br>with Strawbs<br>Thursday 8 PM to 10pm<br>Mix n Match';
              DH[4][13] = 'automix<br>with autodj<br>Thursday at 1 PM<br>mix';
              DH[4][14] = 'The Hour<br>with DJ V-Jeezy<br>Thursday at 2 PM<br>No Genre';
              DH[4][18] = 'Request Show<br>with DJ Strawbs<br>Thursday at 10 PM<br>No Genre';
              DH[5][10] = 'Friday at 10 AM<br>Christian Music<br>with Jammin J';
              DH[5][11] = 'Friday at 11 AM<br>Christian Music<br>with Jammin J';
              DH[5][19] = 'Friday at Eve<br>G-Force<br>with DJ Reuben';
              DH[5][10] = 'Friday at 10 AM<br>Wfams show<br>with Wfam';
              DH[5][09] = 'Friday at 9 AM<br>Mix n Match<br>AutoMix';
              DH[5][14] = 'Friday at 2 PM<br>automix<br>with autodj';
              DH[5][15] = 'Friday at 3 PM<br>automix<br>with autodj';
              DH[5][16] = 'Friday at 4 PM<br>automix<br>with autodj';
              DH[5][17] = 'Friday at 5 PM<br>automix<br>with autodj';
              DH[5][19] = 'Friday at 7 PM<br>Mix n Match<br>AUTOMIX';
              DH[5][22] = 'Friday at 10 PM<br>Dance/Trance<br>with Dean';
              DH[5][23] = 'Friday at 11 PM<br>automix<br>with autodj';
              DH[6][18] = 'Saturday at 6 PM<br>automix<br>with automix';
              DH[6][19] = 'Saturday at 7 PM<br>Dance/Trance<br>with Dean';
              DH[6][13] = 'Saturday at 1 PM<br>Old School/Reggae<br>with El Carlito';
              DH[6][10] = 'Saturday at 10 AM<br>mix<br>with Wfam';
              DH[6][23] = 'Saturday at 11 PM<br>mix<br>with autodj';
              DH[0][18] = 'Sunday   at 18 PM<br>Request Show<br>with Strawbs';
              DH[0][21] = 'Sunday   at 12 PM<br>Sunday Mix365<br>with Deano';
              DH[0][14] = 'Sunday   at 2 PM<br>G Force Reggae<br>with Reuben';
              DH[0][13] = 'Sunday   at 1 PM<br>80s Show<br>with Rob';
              // Add more when schedule is known. Note: there may be better ways to do this when information is known.
              function OnNow() {
                var thedate = new Date();
                var dayofweek = thedate.getDay();
                var hourofday = thedate.getHours();
                // alert(dayofweek+':'+hourofday+'<br />'+DH[dayofweek][hourofday]);
                var showOn = DH[dayofweek][hourofday];
              }

              function NowON() {
                var thedate = new Date();
                var dayofweek = thedate.getDay();
                var hourofday = thedate.getHours();
                var showOn = DH[dayofweek][hourofday];
                if (showOn == '') {
                  showOn = thedate + '<p />No Show Scheduled';
                }
                document.getElementById('NowOn').innerHTML = showOn;
              }

            </script>
          </head>

          <BODY onLoad="NowON()"></BODY>
          <!-- Unhide this if table display desired
<script type="text/javascript">
document.write(TableStationSchedule())
</script>
-->
          <script type="text/javascript">
            document.write(NowON());

          </script>
          <div id='NowOn' onClick="NowON()">Click For Now On COOLVIBES</div>
        </center>
        
          <p>
            <center>We Spin All Types Of Variety
          </p>
          </center>
        

    </html>

  </body>

</html>


<body>
</body>

<div class="topnav" id="myTopnav">
  <a href="https://coolvibes-reloaded.com/index.html" class="active">Home</a>
  <a href="https://coolvibes-reloaded.com/Schedule.html">Schedule</a>
  <a href="https://coolvibes-reloaded.com/tunein.html">Tunein Again</a>
  <a href="https://coolvibes-reloaded.com/mobile.html">Mobile</a>
  <a href="https://coolvibes-reloaded.com/Birthday.html">Birthday</a>
  <a href="https://coolvibes-reloaded.com/featured.html">Featured</a>
  <a href="https://coolvibes-reloaded.com/subscribe.html">Subscribe</a>
  <a href="https://coolvibes-reloaded.com/news.html">News Bulletin</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    Films Coming Soon!
  </div>
</div>

<html>

  <head>
  </head>

  <body>
    <div align="center"><img src="images/jurassic_punk.jpg" height="200px" width="400px">
      <p>Steve ‘Spaz’ Williams is a pioneer in computer animation. His digital dinosaurs of</p>
      <p>Jurassic Park transformed Hollywood in 1993,</p>

      <div align="center">
        <div style="height: 40px;width: 300px; background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);color:white;">
          ^__i class="fa-fw fas fa-snowflake">Special!
        </div>
      </div>
    </div>
    <div align="center"><img src="images/dolphin.jpg" height="200px" width="200px">
      <p>
        <center>"how spectacular is this, bottom of the pool made into dolphins"
      </p>
      </center>
    </div>
    <br />


    <!-- Footer -->
    <footer class="w3-container w3-padding-32 w3-dark-grey">
      <div class="w3-row-padding">
        <div class="w3-third">

          <div align="center">
            <h3>
              <p>other ways of tuneing in</p>
            </h3>
            <div id="cc_tunein">
              <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.pls"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-pls.png" border="0" alt="Winamp, iTunes" title="Winamp, iTunes" /></a>
              <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.asx"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-asx.png" border="0" alt="Windows Media Player" title="Windows Media Player" /></a>
              <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.ram"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
              <a href="http://boogie.vside-radio.com:2199/tunein/coolvibes.qtl"><img align="absmiddle" src="http://boogie.vside-radio.com:2199/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
              <center>
                <p>ways of tunein in</p>
              </center>
              <center>
                <p>Download the Get Me Radio! Roku TV App from <a href="https://channelstore.roku.com/en-gb/details/b97490a8fb5758527be0396e43422e42/get-me-radio">here</a> and then search for Coolvibes Radio.
              </center>
              </p>
              <center>
                <p>Download the Get Me Radio! Android App <a href="https://play.google.com/store/apps/details?id=com.getmeradio.gmr">from here</a> and search for Coolvibes Radio on our Mobile App.
              </center>
              </p>
              <div align="center-right">
                <div style="position:relative; height:60px;">
                  <img src="images/playit.png" width="200" height="70">
                  <style="position:relative; top:-0px; right:-200px; width:200px; height:120px; border:none;" />
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </footer>

    <div> ^__strong>
        <center>© Copyright 2021 | 2024 ^__strong>Coolvibes Reloaded</center>
       | All Rights Reserved | Site by <a href="https://www.coolvibes-reloaded.com/" target="_blank">coolvibes</a>
    </div>
    </center>

    <!-- End page content -->
    </div>

    <script>
      // Script to open and close sidebar
      function w3_open() {
        document.getElementById("mySidebar").style.display = "block";
        document.getElementById("myOverlay").style.display = "block";
      }

      function w3_close() {
        document.getElementById("mySidebar").style.display = "none";
        document.getElementById("myOverlay").style.display = "none";
      }

    </script>

  </body>

</html>
<!-- partial -->

</body>

</html>

CSS
*{
	box-sizing: border-box;
}
@import url(//fonts.googleapis.com/css?family=Open+Sans);
.img{
	float: right;
	top: 20px;
	bottom: 20px;
}
audio::-webkit-media-controls-panel{
	background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);
	box-shadow: inset 29px 12px 19px #0c49a5;
}
body{
	background-color: white;
	color: #000;
	line-height: 2;
	text-align: justify;
	font-family: 'Future Now', sans-serif;
}
@font-face{
	font-family: 'Future Now';
	src: url(Future Now.ttf) format(tff),;
}
@media only screen and (min-width: 600px){
	header{
		margin: 5px auto;
		display: flex;
		align-items: flex-end;
	}
	.logo{
		position: relative;
    
	}
	h1{
		font-size: 3em;
		line-height: 4;
		color: yellow;
		margin-left: 30px;
		box-shadow: inset 29px 12px 19px #0c49a5;
	}
	h1:hover{
		font-size: 3.2em;
		line-height: 4.2em;
		color: pink;
	}
	nav{
		height: 70px;
		background-color: yellow;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		margin: 10px 0 20px 0;
		box-shadow: inset 29px 12px 19px #0c49a5;
	}
	nav ul{
		display: flex;
		list-style-type: none;
		justify-content: space-between;
	}
	nav ul li{
		margin: 10px 25px;
	}
	nav ul li a{
		background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);
		height: 45px;
		padding: 5px 35px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
	#section1{
		grid-area: part1;
	}
	#section2{
		grid-area: part2;
	}
	#section3{
		grid-area: part3;
	}
	#section4{
		grid-area: part4;
	}
	#section5{
		grid-area: part5;
	}
	#section6{
		grid-area: part6;
	}
	#section7{
		grid-area: part7;
	}
	#section8{
		grid-area: part8;
	}
	#section9{
		grid-area: part9;
	}
	#section10{
		grid-area: part10;
	}
	main{
		display: grid;
		background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		height: 1300px;
		margin-top: 30px;
		box-shadow: inset 29px 12px 19px #0c49a5;
		grid-template-areas: "part1 part1 part2 part3""part1 part1 part4 part5""part6 part7 part10 part10""part8 part9 part10 part10";
		grid-gap: 20px;
	}
	.card{
		box-shadow: rgb(255, 0, 102) 0px 4px 8px 0px;
		text-align: center;
		background-color: rgb(26, 188, 156);
		padding: 16px;
	}
	.textbox{
		background-color: #0000ff67;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		margin: 10px 0 20px 0;
		box-shadow: inset 29px 12px 19px #0c49a5;
	}
	table{
		font-family: Future Now;
		border-collapse: collapse;
		width: 100%;
		box-shadow: inset 29px 12px 19px #0c49a5;
	}
	td,th{
		border: 1px solid #e40a0a;
		text-align: left;
		padding: 8px;
	}
	tr:nth-child(even){
		background-color: #fcffff;
	}
	*{
		box-sizing: border-box;
	}
	body{
		font-family: Future Now;
	}
	/* Float four columns side by side */
	.column{
		float: left;
		width: 25%;
		padding: 0 10px;
	}
	/* Remove extra left and right margins, due to padding */
	.row{
		margin: 0 -5px;
	}
	/* Clear floats after the columns */
	.row:after{
		content: "";
		display: table;
		clear: both;
	}
	/* Responsive columns */
	@ media screen and (max-width: 600px){
		.column {
			width: 100%;
			display: block;
			margin-bottom: 20px;
		}
	}
	/* Style the counter cards */
	.card{
		box-shadow: 0 4px 8px 0 rgb(188 26 183);
		padding: 16px;
		text-align: center;
		background-color: #000000;
	}
	*{
		box-sizing: border-box;
	}
	body{
		background-color: #ffffff;
		padding: 20px;
		font-family: Future Now;
	}
	/* Center website */
	.main{
		max-width: 1000px;
		margin: auto;
	}
	h1{
		font-size: 50px;
		word-break: break-all;
	}
	.row{
		margin: 8px -16px;
	}
	/* Add padding BETWEEN each column */
	.row,.row>.column{
		padding: 8px;
	}
	/* Create four equal columns that floats next to each other */
	.column{
		float: left;
		width: 25%;
	}
	/* Clear floats after rows */
	.row:after{
		content: "";
		display: table;
		clear: both;
	}
	/* Content */
	.content{
		background-color: #e20a0a00;
		padding: 10px;
	}
	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 900px){
		.column{
			width: 50%;
		}
	}
	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px){
		.column{
			width: 100%;
		}
	}
}
body{
	margin: 0;
	font-family: Future Now;
}
.topnav{
	overflow: hidden;
	box-shadow: inset 29px 12px 19px #0c49a5;
	background-image: linear-gradient(+130deg, DarkTurquoise, DarkBlue);
}
.topnav a{
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}
.topnav a:hover{
	background-color: #00bcd42e;
	color: #00bcd4;
}
.topnav a.active{
	background-color: #00bcd400;
	color: white;
}
.topnav .icon{
	display: none;
}
@media screen and (max-width: 600px){
	.topnav a:not(:first-child){
		display: none;
	}
	.topnav a.icon{
		float: right;
		display: block;
	}
}
@media screen and (max-width: 600px){
	.topnav.responsive{
		position: relative;
	}
	.topnav.responsive .icon{
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a{
		float: none;
		display: block;
		text-align: left;
	}
}
table{
	font-family: sans-serif;
	border-collapse: collapse;
	width: 100%;
	background-color: #1d69b1;
	box-shadow: inset 29px 12px 19px #11dce6;
}
td,th{
	border: 1px solid #126a56;
	text-align: left;
	padding: 8px;
	box-shadow: #ffcc00;
}
tr:nth-child(even){
	background-color: #fff;
	box-shadow: aliceblueinset 29px 12px 19px #0c49a5;
}
ul{
	/* Remove the ul default styling */
	list-style: none;
}
li i{
	margin-right: 20px;
}
function myFunction(){
	var x=document.getElementById("myTopnav");
	if (x.className==="topnav") {
		x.className+=" responsive";
	}
	else{
		x.className="topnav";
	}
}
body{
	background-color: #fff;
}
.height-100{
	height: 100vh;
}
.card{
	width: 400px;
	border: none;
	box-shadow: 3px 3px 5px 9px #f10101;
}
.form-control{
	height: 50px;
	border: 2px solid #eee;
}
.form-control:focus{
	box-shadow: none;
	border: 2px solid #dc3545;
}
.btn-danger{
	height: 50px;
	font-size: 11px;
}
div.gallery{
	
	box-shadow: inset 29px 12px 19px transparent;
}
div.gallery:hover{
	border: 1px solid #777;
}
div.gallery img{
	width: 20%;
	height: auto;
	position: absolute;
	left: 330px;
	
	
	box-shadow: inset 29px 12px 19px #0c49a5;
}
div.desc{
	padding: 15px;
	text-align: center;
}
*{
	box-sizing: border-box;
}
.responsive{
	padding: 0 6px;
	float: left;
	width: 24.99999%;
}
@media only screen and (max-width: 700px){
	.responsive{
		width: 49.99999%;
		margin: 6px 0;
	}
}
@media only screen and (max-width: 500px){
	.responsive{
		width: 100%;
	}
}
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}

私が試したこと:

CSSの変更からすべて
htmlの修正
Google でアイデアを検索する
たくさん

解決策 1

あまり役に立たない
コードで

[ad_2]

コメント

タイトルとURLをコピーしました