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