Skip to content

Header fix #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MiiaKlingstedt wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Header fix #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5f5bc3
mega menu
GentianaBR Mar 24, 2026
16b1256
Improve navbar: unified desktop/mobile behavior and fix accordion for…
GentianaBR Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 106 additions & 97 deletions assets/custom.css.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,13 @@ input[type=number] {
.collection-row-container {
display: grid;
grid-template-columns: repeat({{ settings.secProdRowAmount | def:"4" }}, minmax(calc(1375px / {{ settings.secProdRowAmount | def:"4" }}), 1fr));
overflow-x: auto;
overflow-x: scroll;
}

.collection-template-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(1280px / {{ settings.colProductCount | def:"4" }})) , 1fr));
overflow: visible;
}

{% if settings.border_radius != blank%}
Expand Down Expand Up @@ -431,125 +437,128 @@ body {
box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
--size: calc(var(--size-field, 0.25rem) * 10);
}
@media(min-width:768px){

.footer-main{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
grid-template-areas:
"brand col1 col2 col3 col4";
gap:3rem;
justify-content:center;
}
.footer-brand{
grid-area:brand;
border-right:1px solid rgba(255,255,255,0.2);
padding-right:2.5rem;
display:flex;
flex-direction:column;
gap:1.5rem;
}

.footer-col-1{grid-area:col1;}
.footer-col-2{grid-area:col2;}
.footer-col-3{grid-area:col3;}
.footer-col-4{grid-area:col4;}
/* FOOTER STYLES */

.footer-bottom{
grid-area:bottom;
border-top:1px solid rgba(255,255,255,0.2);
padding-top:2.5rem;
}
.footer-bottom-inner{
display:flex;
justify-content:center;
align-items:flex-start;
gap:6rem;
}
@media(min-width:768px){
.footer-main{
max-width:1200px;
margin:0 auto;
gap:3rem;
}
.footer-brand {
display:flex;
flex-direction:column;
gap:1.5rem;
}
.footer-bottom {
padding-top:2.5rem;
}
.footer-bottom-inner {
display:flex;
justify-content:center;
align-items:flex-start;
gap:6rem;
}
}

.footer-bottom .container,
.footer-copyright.container{
max-width:100%;
.footer-copyright.container {
max-width:100%;
}
.footer-title{
font-weight:600;
margin-bottom:.75rem;
.footer-title {
font-weight:600;
margin-bottom:.75rem;
}
.social-icons{
display:flex;
gap:1rem;
align-items:center;
display:flex;
gap:1rem;
align-items:center;
}
.shopify-payments,
.footer-payments ul{
display:flex;
gap:.75rem;
align-items:center;
display:flex;
gap:.75rem;
align-items:center;
}
.footer-cta{
background:#5b3df5;
color:white;
padding:.75rem 1.5rem;
font-weight:600;
border-radius:4px;
text-decoration:none;
width:fit-content;
background:#5b3df5;
color:white;
padding:.75rem 1.5rem;
font-weight:600;
border-radius:4px;
text-decoration:none;
width:fit-content;
}
.footer-bottom-title,
.footer-title{
margin-bottom:.20rem;
font-weight:600;
}
.footer-navigation{
display:contents;
.footer-title {
margin-bottom:.20rem;
font-weight:600;
}
@media(max-width:767px){

.footer-main{
display:grid;
grid-template-columns:1fr;
gap:0.5rem;
}
.footer-brand{
border-right:none;
padding-right:0;
}
.footer-links{
border-bottom:1px solid rgba(255,255,255,0.15);
padding:1rem 0;
}
}
.payment-single ul{
max-width:420px;
grid-template-columns:repeat(4,1fr);
@media(max-width:767px){
.footer-main{
gap:0.5rem;
}
.footer-brand{
border-right:none;
padding-right:0;
}
.footer-links {
padding:1rem 0;
}
}

@media(min-width:768px){
.payment-single ul{
grid-template-columns:repeat(5,1fr);
max-width:420px;
grid-template-columns:repeat(4,1fr);
}
.payment-single{
max-width:420px;
}.payment-single ul li{
min-width:48px;
min-height:32px;

@media(min-width:768px) {
.footer-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
}
.payment-single ul {
grid-template-columns:repeat(5,1fr);
}
.payment-single {
max-width:420px;
}
.payment-single ul li {
min-width:48px;
min-height:32px;
}
}
/* center footer when only one link column */

.footer-main.footer-single{
max-width:1100px;
margin-left:auto;
margin-right:auto;
padding-left:25rem;
grid-template-columns:1fr 1fr 1fr;
column-gap:15em;
.footer-main.footer-single {
max-width:1100px;
margin-left:auto;
margin-right:auto;
padding-left:25rem;
column-gap:15em;
}

@media (min-width:768px) and (max-width:1024px){
.footer-main.footer-single{
padding-left:4rem;
column-gap:2rem;
.footer-main.footer-single{
padding-left:4rem;
column-gap:2rem;
}
}
/* FOOTER STYLES END */

/* ProductCard image styling */

.product-image-wrapper {
height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
/**/

.product-image {
max-height: 100%;
width: auto;
object-fit: contain;
}
71 changes: 38 additions & 33 deletions snippets/productCard.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,42 @@
<div class="card {{ settings.general_shadow }} bg-base-100">
<a href="{{ product | url }}">
<a href="{{ product | url }}" class="flex flex-col h-full">
{% if product.quantity <= 0 %}
<div class="absolute top-3 left-4">
<span class="badge font-bold badge-accent">{{ 'Out of stock' | t:'collection' }}</span>
</div>
{% endif %}

{% if product.featuredImage %}
{% if product.quantity <= 0 %}
<div class="absolute top-3 left-4">
<span class="badge font-bold badge-accent">{{ 'Out of stock' | t:'collection' }}</span>
</div>
{% endif %}
<figure>
<img class="{{ settings.col_card_img_height }}" src="{{ product.featuredImage | product_img_url:0,500 }}" alt="{{ product.featuredImage.alt }}" />
</figure>
{% endif %}
<div class="card-body justify-end">
<div class="flex flex-col">
<h3 class="card-title text-base">
{{ product.meta.h1 }}
</h3>
<div class="text-left">
{% if product.variants.size > 1 and product.priceMin < product.priceMax %}
<span class="ml-1 {% if product.compareAtPriceMin > product.priceMin %}font-bold text-red-400{% endif %}">
{{ product.priceMin | money }}
</span>
&dash;
<span class="ml-1 {% if product.compareAtPriceMax > product.priceMax %}font-bold text-red-400{% endif %}">
{{ product.priceMax | money }}
</span>
{% else %}
<span class="{% if product.compareAtPrice > product.price %}font-bold text-red-400{% endif %}">{{ product.price | money }}</span>
{% endif %}
<figure>
{{ product.featuredImage | img_tag:0,productHeight,class:settings.col_card_img_height }}
</figure>
{% endif %}
<div class="card-body justify-end">
<div class="flex flex-col">
<h3 class="card-title text-base">
{{ product.meta.h1 }}
</h3>
<div class="text-left">
{% if product.variants.size > 1 and product.priceMin < product.priceMax %}
<span class="ml-1 {% if product.compareAtPriceMin > product.priceMin %}font-bold{% endif %}">
{{ product.priceMin | money }}
</span>
&dash;
<span class="ml-1 {% if product.compareAtPriceMax > product.priceMax %}font-bold{% endif %}">
{{ product.priceMax | money }}
</span>
{% else %}
{% if product.compareAtPrice > product.price %}
<s>{{ product.compareAtPrice | money }}</s><span class="font-bold" >{{ product.price | money }}</span>
{% else %}
{{ product.price | money }}
{% endif %}
{% endif %}
</div>
</div>
<div class="card-actions justify-end">
<button class="btn btn-secondary btn-sm">{{ 'Read more' | t:'collection' }}</button>
</div>
</div>
<div class="card-actions justify-end">
<a class="btn btn-accent btn-sm" href="{{ product | url }}">{{ 'Read more' | t:'collection' }}</a>
</div>
</div>
</a>
</div>
</a>
</div>
Loading