To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Where to put CSS? Stylesheet messing up my page

Solved
SamiBaydani
Tourist
10 0 1

Hi all! 

I've added a moving logo slide.

However my CSS keeps messing up my page and it won't scroll down anymore (like on the page now).
I've created a new custom.css asset with the CSS, which I've then added to my theme.liquid. 
I've added it like this, shown in this picture under my other custom CSS (the others work fine though).

Anyone knows what I'm doing wrong here? Below's the CSS code!

Screenshot 2023-01-24 at 22.28.38.png

 

My CSS: 

:root {
--color-text: navy;
--color-bg: papayawhip;
--color-bg-accent: #ecdcc0;
--size: clamp(10rem, 1rem + 40vmin, 30rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
:root {
--color-text: papayawhip;
--color-bg: navy;
--color-bg-accent: #2626a0;
}
}

* {
box-sizing: border-box;
}

body {
display: grid;
align-content: center;
overflow: hidden;
gap: var(--gap);
width: 100%;
min-height: 100vh;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-bg);
}

.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
}

.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.marquee__group {
animation-play-state: paused;
}
}

.marquee--vertical {
--mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
flex-direction: column;
}

.marquee--vertical .marquee__group {
animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}

@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}

@keyframes scroll-y {
from {
transform: translateY(var(--scroll-start));
}
to {
transform: translateY(var(--scroll-end));
}
}

/* Element styles */
.marquee svg {
display: grid;
place-items: center;
width: var(--size);
fill: var(--color-text);
background: var(--color-bg-accent);
aspect-ratio: 16/9;
padding: calc(var(--size) / 10);
border-radius: 0.5rem;
}

.marquee--vertical svg {
aspect-ratio: 1;
width: calc(var(--size) / 1.5);
padding: calc(var(--size) / 6);
}

/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}

.wrapper--vertical {
flex-direction: row;
height: 100vh;
}

/* Toggle direction button */
.toggle {
--size: 3rem;
position: relative;
position: fixed;
top: 1rem;
left: 1rem;
width: var(--size);
height: var(--size);
font: inherit;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 50%;
color: inherit;
background-color: var(--color-bg-accent);
z-index: 1;
}

.toggle:focus-visible {
box-shadow: 0 0 0 2px var(--color-text);
}

.toggle span {
position: absolute;
display: inline-block;
top: 50%;
left: calc(100% + 0.4em);
width: fit-content;
white-space: nowrap;
transform: translateY(-50%);
animation: fade 400ms 4s ease-out forwards;
user-select: none;
}

.toggle svg {
--size: 1.5rem;
position: absolute;
top: 50%;
left: 50%;
width: var(--size);
height: var(--size);
fill: currentcolor;
transform: translate(-50%, -50%);
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.toggle--vertical svg {
transform: translate(-50%, -50%) rotate(-90deg);
}

@keyframes fade {
to {
opacity: 0;
visibility: hidden;
}
}

Accepted Solution (1)

Accepted Solutions
EBOOST
Shopify Partner
347 126 96

This is an accepted solution.

Hi @SamiBaydani 

May I suggest you remove code like the screenshot below

 

EBOOST_2-1674611683196.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

View solution in original post

Replies 2 (2)
EBOOST
Shopify Partner
347 126 96

This is an accepted solution.

Hi @SamiBaydani 

May I suggest you remove code like the screenshot below

 

EBOOST_2-1674611683196.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST
SamiBaydani
Tourist
10 0 1

This worked, thank you very much!