Montoya
asked on
Problems with CSS Grid in IE 11
I'm having a huge issue with CSS grid inside IE.. of course this all works fine in every other browser. If I try to put it in IE, it dies a horrible death.
I have this pen: https://codepen.io/iammontoya/pen/WNbKGZQ
Everything works, except for IE. I even tried a preprocessor, but to no avail. Can someone please help me ?
I have this pen: https://codepen.io/iammontoya/pen/WNbKGZQ
Everything works, except for IE. I even tried a preprocessor, but to no avail. Can someone please help me ?
ste5an
Well, posting links to code is bad habit.. especially as for your problem, the used tool behind does not even run in IE..
ASKER
I really don't understand what you are saying, or how it is helpful.
I went through and cleaned up as much as I could, and put it in an environment where it would be easier for someone trying to help to find the solution.
I went through and cleaned up as much as I could, and put it in an environment where it would be easier for someone trying to help to find the solution.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Well..
ASKER
<!DOCTYPE html>
<html>
<head>
<title>Welcome !</title>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Poppins">
</head>
<body>
<div class='container'>
<!-- Slider Starts Here! -->
<section class="lazy slider autoplay" data-sizes="50vw">
<div>
<a href="#"> <img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="http://placehold.it/650x300?text=2-650w 650w, ../SiteAssets/img/welcomebanner.jpg 960w" data-sizes="100vw"></a>
</div>
<div>
<a href="" target="_blank"> <img data-lazy="http://placehold.it/350x300?text=3-350w" data-srcset="../SiteAssets/img/RCLIQ-banner.jpg 650w, ../SiteAssets/img/RCLIQ-banner.jpg 960w" data-sizes="100vw"></a>
</div>
<div>
<a href="" target="_blank"> <img data-lazy="../SiteAssets/img/edgeupdate.jpg" data-srcset="../SiteAssets/img/edgeupdate.jpg 650w, ../SiteAssets/img/edgeupdate.jpg 960w" data-sizes="100vw"></a>
</div>
<div>
<a href="" > <img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="</a>
</div>
<div>
<a href="" target="_blank"> <img data-lazy="http://placehold.it/350x300?text=3-350w" data-srcset="" data-sizes="100vw"></a>
</div>
<div>
<a href=""> <img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="" data-sizes="100vw"></a>
</div>
</section>
<!-- Slider Ends Here -->
<!-- **** 8 box Grid starts -->
<div class='new-cards'>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
<div class="our-team"><a href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
</a>
</div>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
<div class="our-team"><a class="card-link" href="">
<div class="picture">
<img class="img-fluid" src="">
</div>
<div class="team-content">
<h3 class="name">Someone</h3>
<h4 class="title">Something</h4>
</div>
<!-- <ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul> -->
</a>
</div>
</div>
<!-- ***** 8 box Grid ends -->
<!-- Scripts required for page to run -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="" charset="utf-8"></script>
<script src=""></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".lazy").slick({
lazyLoad: 'ondemand', // ondemand progressive anticipated
infinite: true
});
});
</script>
<!-- Blog and Links -->
<div class="blogs-and-links">
<!-- Blog -->
<div class="blogs">
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url(../SiteAssets/img/youcandoit.png)"></div>
<!-- <ul class="details">
<li class="author"><a href="#">John Doe</a></li>
<li class="date">Aug. 24, 2015</li>
<li class="tags">
<ul>
<li><a href="#">Learn</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul> -->
</div>
<div class="description">
<p class="read-more">
<a href="">Read More</a>
</p>
</div>
</div>
<div class="blog-card alt">
<div class="meta">
<div class="photo" style="background-image: u"></div>
<!-- <ul class="details">
<li class="author"><a href="#">Jane Doe</a></li>
<li class="date">July. 15, 2015</li>
<li class="tags">
<ul>
<li><a href="#">Learn</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul> -->
</div>
<div class="description">
<p class="read-more">
<a href="">Read More</a>
</p>
</div>
</div>
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url()"></div>
<!-- <ul class="details">
<li class="author"><a href="#">John Doe</a></li>
<li class="date">Aug. 24, 2015</li>
<li class="tags">
<ul>
<li><a href="#">Learn</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul> -->
</div>
<div class="description">
<p class="read-more">
<a href="https://www.youtube.com/watch_popup?v=keYB-ZyQ7Ac">Read More</a>
</p>
</div>
</div>
</div> <!-- Ends .blogs -->
<!-- Links -->
<!-- Useful Links -->
<div class="links-section">
<h3>Useful Links</h3>
<ul class="links useful-links">
<li><a href="">Link</a></li>
<li><a href="">Links</a></li>
<li><a href="">Holiday Calendar</a></li>
<li><a href="">Software Catalog</a></li>
<li><a href="">Links</a></li>
</ul>
<!-- ToolKit -->
<h3>Sites</h3>
<ul class="links tools-links">
<li><a href=" data-lite-tooltip-position="left" data-lite-tooltip-width="180" data-lite-tooltip=''>Commercial</a></li>
<li><a href="">Management</a></li>
<li><a href="">Products</a></li>
<li><a href="">Learning</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<!-- Ends links-section -->
</div>
<!-- testing dialogs -->
<!-- end of dialog text -->
</div> <!-- Ends container div -->
<script>
$('.autoplay').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
cssEase: 'linear'
});
</script>
</body>
</html>CSS
/* Variables */
:root {
--primary: #558800;
--back: #f3dfa2;
--light: #faf9f8;
--accent: #80dcc4;
--color-white: #fff;
--color-grey: #e2e2e2;
--color-prime: #5ad67d;
--color-grey-dark: #a2a2a2;
}
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
background: #fff;
}
h1,
h2,
h3 {
font-family: Poppins, sans-serif;
color: var(--primary);
}
.head {
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "logo nav";
}
.logo {
margin-left: 30px;
width:auto;
}
/* Navigation */
#nav {
/* position: absolute; */
/* margin-bottom: 20px; */
/* padding:20px 0px; */
/* right: 60px; */
font-family: Poppins;
justify-self: right;
padding-right: 40px;
}
#nav li {
display: inline-block;
margin-left:30px;
}
#nav li a {
font-size: 1rem;
font-weight: 900;
text-decoration: none;
float:left;
padding:10px;
/* background-color: #333333; */
color:#000000;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}
#nav li a:hover
{
/* background-color: var(--primary); */
color: var(--primary);
padding-bottom:12px;
border-bottom:2px;
margin:-1px;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}
/* carousel starts here */
.slider {
width: 1200px;
margin: 20px auto 0 auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
height:420px;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out 0.3s;
opacity: 0.2;
}
.slick-active {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
/* carousel ends here */
/* cards */
/* .business-segments {
margin: 20px 120px;
display: grid;
text-align: center;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
justify-content: center;
}
.segment-box {
border: 1px solid black;
height: 220px;
min-width: 120px;
background: #fff;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
} */
/*
.new-cards {
width: 80%;
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: center;
align-content: center;
grid-gap: 20px;
margin: 20px auto;
}
*/
.new-cards {
width: 80%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
grid-template-columns: repeat(4, 1fr);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
grid-gap: 20px;
margin: 20px auto;
}
.our-team {
padding: 30px 0 40px;
margin-bottom: 30px;
background-color: #ffffff;
text-align: center;
overflow: hidden;
position: relative;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}
.our-team .picture {
display: inline-block;
height: 130px;
width: 130px;
margin-bottom: 10px;
z-index: 1;
position: relative;
}
.our-team .picture::before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background-color: var(--primary);
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 0.9;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .picture::before {
height: 100%;
}
.our-team .picture::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--primary);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.our-team .picture img {
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .picture img {
box-shadow: 0 0 0 14px #f7f5ec;
transform: scale(0.7);
}
.our-team .title {
display: block;
font-family: Poppins;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
background-color: var(--primary);
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 17px;
color: white;
transition: all 0.3s ease 0s;
text-decoration: none;
}
.our-team .social li a:hover {
color: var(--primary);
background-color: #fff;
}
.card-link:link {
text-decoration: none;
}
/* Blog */
/*PEN STYLES*/
* {
box-sizing: border-box;
}
/* body {
background: #f1f1f1;
margin: 2rem;
} */
.blog-card {
display: flex;
flex-direction: column;
margin: 1rem auto;
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
margin-bottom: 1.6%;
background: #fff;
line-height: 1.4;
font-family: Poppins, sans-serif;
font-weight: normal;
border-radius: 5px;
overflow: hidden;
z-index: 0;
}
.blog-card a {
color: inherit;
}
/* .blog-card a:hover {
color: #5ad67d;
} */
/* .blog-card:hover .photo {
transform: scale(1.3) rotate(3deg);
} */
.blog-card .meta {
position: relative;
z-index: 0;
height: 200px;
}
.blog-card .photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
transition: transform 0.2s;
}
.blog-card .details,
.blog-card .details ul {
margin: auto;
padding: 0;
list-style: none;
}
.blog-card .details {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
margin: auto;
transition: left 0.2s;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 10px;
width: 100%;
font-size: 0.9rem;
}
.blog-card .details a {
text-decoration: dotted underline;
}
.blog-card .details ul li {
display: inline-block;
}
.blog-card .details .author:before {
font-family: FontAwesome;
margin-right: 10px;
content: "\f007";
}
.blog-card .details .date:before {
font-family: FontAwesome;
margin-right: 10px;
content: "\f133";
}
.blog-card .details .tags ul:before {
font-family: FontAwesome;
content: "\f02b";
margin-right: 10px;
}
.blog-card .details .tags li {
margin-right: 2px;
}
.blog-card .details .tags li:first-child {
margin-left: -4px;
}
.blog-card .description {
padding: 1rem;
background: #fff;
position: relative;
z-index: 1;
color: #AAAAAA;
}
.blog-card .description h1,
.blog-card .description h2 {
font-family: Poppins, sans-serif;
}
.blog-card .description h1 {
line-height: 1;
margin: 0;
font-size: 1.7rem;
}
.blog-card .description h2 {
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
color: #a2a2a2;
margin-top: 5px;
}
.blog-card .description .read-more {
text-align: right;
}
.blog-card .description .read-more a {
color: var(--primary);
/* display: inline-block; */
position: relative;
}
.blog-card .description .read-more a:after {
content: "\f061";
font-family: FontAwesome;
margin-left: -10px;
opacity: 0;
vertical-align: middle;
transition: margin 0.3s, opacity 0.3s;
}
.blog-card .description .read-more a:hover:after {
margin-left: 5px;
opacity: 1;
}
.blog-card p {
position: relative;
margin: 1rem 0 0;
}
.blog-card p:first-of-type {
margin-top: 1.25rem;
}
.blog-card p:first-of-type:before {
content: "";
position: absolute;
height: 5px;
background: var(--back);
width: 35px;
top: -0.75rem;
border-radius: 3px;
}
.blog-card:hover .details {
left: 0%;
}
@media (min-width: 640px) {
.blog-card {
flex-direction: row;
max-width: 700px;
}
.blog-card .meta {
flex-basis: 40%;
height: auto;
}
.blog-card .description {
flex-basis: 60%;
}
.blog-card .description:before {
transform: skewX(-3deg);
content: "";
background: #fff;
width: 30px;
position: absolute;
left: -10px;
top: 0;
bottom: 0;
z-index: -1;
}
.blog-card.alt {
flex-direction: row-reverse;
}
.blog-card.alt .description:before {
left: inherit;
right: -10px;
transform: skew(3deg);
}
.blog-card.alt .details {
padding-left: 25px;
}
}
/* Links */
/* Tooltip container */
[data-lite-tooltip] {
cursor: help;
}
body {
padding: 0;
margin: 0;
text-align: center;
font-family: Helvetica;
}
#tooltip a {
color: #fff;
}
.lite-tooltip {
opacity: 0;
top: 0;
left: 0;
position: absolute;
z-index: 1;
background-color: var(--primary);
color: #fff;
font-color: 14px;
padding: 1.4rem 2rem;
border-radius: 3px;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.lite-tooltip:before {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #3b4355 transparent transparent transparent;
display: inline-block;
}
.lite-tooltip.lite-tooltip-bottom:before {
bottom: auto;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 0 6px 6px 6px;
border-color: transparent transparent #3b4355 transparent;
}
.lite-tooltip.lite-tooltip-right:before {
bottom: auto;
left: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 6px 6px 0;
border-color: transparent #3b4355 transparent transparent;
}
.lite-tooltip.lite-tooltip-left:before {
bottom: auto;
left: auto;
right: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent #3b4355;
}
ul>li>a {
margin-top: 30px;
}
/* end tooltip */
.blogs-and-links {
display: grid;
grid-template-columns: 3fr 1fr;
grid-column-gap: 20px;
grid-template-areas: "blogs links";
}
.blogs-and-links h3 {
text-align: center;
font-weight:800;
}
.links-section {
grid-area: links;
width: 250px;
line-height: 1.2rem;
}
.links-section a {
text-decoration: none;
color: black;
}
.links-section a:hover {
color: var(--accent);
}
.links-section li {
list-style-type: none;
font-family: Poppins, sans-serif;
font-weight: light;
color: black;
line-height: 1.6rem;
}
.links {
margin-bottom: 40px;
}
/* Footer */
/* For Team page blog cards */
.space {
padding-top: 80px;
}
#team-blogs {
/* margin-top: 70px; */
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"outer";
}
.outer {
font-family: Poppins;
position: relative;
background: #fff;
height: 400px;
width: 640px;
overflow: hidden;
/* display: flex; */
align-items: center;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
margin-left: 180px;
padding: 40px 0px;
margin-bottom: 40px;
}
.outer img {
position: absolute;
width: 180px;
/* top: 0px; */
right: 40px;
z-index: 0;
animation-delay: 0.5s;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
border-radius: 50%;
border: 5px solid var(--primary);
}
.outer .content {
animation-delay: 0.3s;
position: absolute;
top: 10px;
left: 20px;
z-index: 3
}
.outer h1 {
color: var(--primary);
}
.outer p {
width: 370px;
font-size: 1rem;
line-height: 1.4;
color: #aaa;
margin-top: 20px;
}
.outer li {
list-style-type: none;
font-size: .8rem;
}
.outer .subTitle {
width: 380px;
padding-left: 30px;
}
.outer span {
color: var(--back);
font-size: .9rem;
}
.com-banking-outer {
height:280px;
margin-left: 100px;
margin-top:50px;
}
.bg {
display: inline-block;
color: #fff;
background: cornflowerblue;
padding: 5px 10px;
border-radius: 50px;
font-size: .7em;
}
.button {
position: relative;
width: fit-content;
height: fit-content;
margin: 300px auto 0px auto;
}
.button a {
display: inline-block;
overflow: hidden;
position: relative;
font-size: 11px;
color: var(--primary);
text-decoration: none;
padding: 10px 15px;
border: 1px solid #aaa;
font-weight: bold;
}
.button a:after{
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0%;
background: var(--back);
height: 100%;
z-index: -1;
transition: width 0.3s ease-in-out;
transform: skew(-25deg);
transform-origin: right;
}
.button a:hover:after {
width: 150%;
left: -10px;
transform-origin: left;
}
.button a:hover {
background-color: var(--back);
color:var(--primary);
transition: all 0.5s ease;
}
.button a:nth-of-type(1) {
border-radius: 50px;
/* border-right: none; */
}
.button a:nth-of-type(2) {
border-radius: 0px 50px 50px 0;
}
.cart-icon {
padding-right: 8px;
}
#team-links {
position: fixed;
right: 160px;
top: 210px;
}
.blurb {
font-family: Poppins;
font-size:1rem;
margin-left: 100px;
margin-bottom: 40px;
width: 60%;
align-content: center;
justify-content: left;
margin-top:-48px;
}
.mission-statement {
font-family: Poppins;
width: 700px;
margin-left: 100px;
line-height:1.2rem;
font-size:.9rem;
}
.mission-statement>img {
width: 100%;
}
aha, you mean CSS grid layout. You need a polyfill: CSS Grid and IE11.
But the question is: Why using modern HTML5 and insisting on IE?
But the question is: Why using modern HTML5 and insisting on IE?
ASKER
I was asked to build what you see (plus some other things) and the initial requirement was Chrome.. then a corporate mandate switched to IE
ASKER