I recently redeveloped my site using CSS Grid. It works on all browsers I have tried except Edge & IE where the row heights are huge. I have also tried the Autoprefixer with no luck. The display is also responsive in browsers other than Edge & IE. My CSS code is as follows and I would appreciate any suggestions:
@charset "utf-8";
body {
background: #a1dada;
/* padding: 3rem 5rem; */
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
}
.item1 {
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
}
.item2 {
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
}
.item3 {
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
}
.item4 {
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
}
.item5 {
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
}
.services-title {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
}
.services-list {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
}
.navmenu {
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
}
.navmenu > a {
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
}
.navmenu a:hover {
color: rgb(236, 11, 11);
font-weight: bolder;
}
.rightmain {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
}
.center {
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
}
.leftmain {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
}
.leftmaintitle {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
}
.rightmaintitle {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
}
.foot {
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
}
