My website was created using Jekyll and Sass. I attempted to make the site responsive, but for some reason, the media queries are not affecting the div class.
This is my style.sass snippet:
.img-link
width: calc(32% - 14px)
border: 2px solid white
@media (max-width: 700px)
.img-link
width: calc(97% - 14px)
I am utilizing Sass on a mixin in a Jade file:
mixin img(link, img, color)
a(href="#{link}").img-link
Here is the compiled CSS:
section.notes .img-link {
width: -webkit-calc(32% - 14px);
width: calc(32% - 14px);
border: 2px solid white;
@media screen and (max-width: 700px) {
section.notes .img-link .img-link {
width: -webkit-calc(97% - 14px);
width: calc(97% - 14px); } }
section.notes .img-link img {
width: 100%; }
@media (max-width: 700px) {
.img-link {
width: -webkit-calc(97% - 14px);
width: calc(97% - 14px); } }
This is the compiled HTML:
<head>
<link rel="stylesheet" href="/assets/css/main.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<section class="notes">
<div class="flex flex--center">
<div data-orig-color="#ea4c89" class="col-3 flex flex--center dribbble">
<div class="col-3">
<p class="home-lead">...Updating...</p>
<a href="#" data-color="orange" class="img-link"><img src="assets/img/design-img/drib-1.jpg"/></a>
<a href="#" data-color="#aeb3b0" class="img-link"><img src="assets/img/design-img/drib-2.jpg"/></a>