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
<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>
<!--
<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;
}
#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">
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';
function OnNow() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
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>
<!--
<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 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>
<!--
</div>
<script>
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>
<!--
</body>
</html>
*{
box-sizing: border-box;
}
@import url(
.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;
}
.column{
float: left;
width: 25%;
padding: 0 10px;
}
.row{
margin: 0 -5px;
}
.row:after{
content: "";
display: table;
clear: both;
}
@ media screen and (max-width: 600px){
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.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;
}
.main{
max-width: 1000px;
margin: auto;
}
h1{
font-size: 50px;
word-break: break-all;
}
.row{
margin: 8px -16px;
}
.row,.row>.column{
padding: 8px;
}
.column{
float: left;
width: 25%;
}
.row:after{
content: "";
display: table;
clear: both;
}
.content{
background-color: #e20a0a00;
padding: 10px;
}
@media screen and (max-width: 900px){
.column{
width: 50%;
}
}
@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{
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;
}
What I have tried:
everything from changing css
fixing the html
searching google for ideas
the lot