Skip to content

Instantly share code, notes, and snippets.

@MyronBatiuk
Created August 21, 2018 10:16
Show Gist options
  • Select an option

  • Save MyronBatiuk/9ca2cc952284707f8f9ae079cd14fcf9 to your computer and use it in GitHub Desktop.

Select an option

Save MyronBatiuk/9ca2cc952284707f8f9ae079cd14fcf9 to your computer and use it in GitHub Desktop.
.box {
@include grid-item(3);
margin-bottom: $gridGutter;
width: calc(25% - 30px);
&.header {
text-align: center;
.details {
width: 100%;
padding-right: $gridGutter;
}
h4 {
font-size: emHeading(28px);
text-transform: $primaryTitleTextTransform;
font-weight: $primaryTitleTextWeight;
}
@include mediaQuery($max, $mobile) {
p{
font-size: em(14px);
}
}
}
@include mediaQuery($max, 950px) {
width: calc(33.3333% - 30px);
}
@include mediaQuery($max, $tablet) {
@include grid-item(6);
width: calc(50% - 30px);
}
@include mediaQuery($max, $mobile) {
{% if settings.collections_product_columns == "1" %}
@include grid-item(12);
{% endif %}
width: 100%;
&.header {
.details {
padding-right: 0;
}
}
}
}
.product-container {
@include grid();
.box {
@include grid-item(3);
margin-bottom: $gridGutter;
width: calc(25% - 30px);
@include mediaQuery($max, 950px) {
width: calc(33.3333% - 30px);
}
@include mediaQuery($max, $tablet) {
@include grid-item(6);
width: calc(50% - 30px);
}
@include mediaQuery($max, $mobile) {
{% if settings.collections_product_columns == "1" %}
@include grid-item(12);
{% endif %}
width: 100%;
}
}
}
.products-grid {
position: relative;
@include grid();
.box.product {
@include grid-item(4);
margin-bottom: 20px;
width: calc(33.33333% - 30px);
figcaption {
text-align: center;
}
@include mediaQuery($max, 950px) {
@include grid-item(6);
width: calc(50% - 30px);
}
@include mediaQuery($max, $mobile) {
{% if settings.collections_product_columns == "1" %}
@include grid-item(12);
{% endif %}
width: 100%;
}
}
&.full-width {
.box.product {
@include grid-item(3);
@include mediaQuery($max, $tablet) {
@include grid-item(6);
}
@include mediaQuery($max, $mobile) {
{% if settings.collections_product_columns == "1" %}
@include grid-item(12);
{% endif %}
}
}
}
> p {
font-size: em(16px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment