hi all basically my website is responsive
the problem i have got is the desktop part is all well and good
but when you go to resize it to mobile etc things collide?
was wondering if anyone could help
if anyone could help me fix this, that would be brill
i have tried googling for answers n nothing
tried youtube videos
tried fixing myself
</html>
<!-- partial -->
</body>
</html>[/CODE]
the problem i have got is the desktop part is all well and good
but when you go to resize it to mobile etc things collide?
was wondering if anyone could help
HTML:
<!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>
[CODE=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;
}if anyone could help me fix this, that would be brill
i have tried googling for answers n nothing
tried youtube videos
tried fixing myself
</html>
<!-- partial -->
</body>
</html>[/CODE]
