Ziggy

Hi @Octavian9765, can you share your website URL and site wide password if it's not public? Thanks!

Not always easy to translate from a stand-alone codepen to your website, elements like "body" need to be handled with care because that CSS will affect the whole website. This is a start hopefully, add all as is to a code block: <style> .container { //position: absolute; //transform: translate(-50%, -50%); //top: 40%; //left: 50%; } .glitch { color: rgb(223, 191, 191); position: relative; font-size: 9vw; margin: 70px 200px; animation: glitch 5s 5s infinite; } .glitch::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: -5px 0 magenta; background: black; overflow: hidden; top: 0; animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite; } .glitch::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -5px 0 lightgreen; background: black; overflow: hidden; top: 0; animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite; } @keyframes glitch { 1%{ transform: rotateX(10deg) skewX(90deg); } 2%{ transform: rotateX(0deg) skewX(0deg); } } @keyframes noise-1 { $steps: 30; @for $i from 1 through $steps { #{percentage($i*(1/$steps))} { $top: random(100); $bottom: random(101 - $top); clip-path: inset(#{$top}px 0 #{$bottom}px 0); } } } @keyframes noise-2 { $steps: 30; @for $i from 0 through $steps { #{percentage($i*(1/$steps))} { $top: random(100); $bottom: random(101 - $top); clip-path: inset(#{$top}px 0 #{$bottom}px 0); } } } .scanlines { overflow: hidden; mix-blend-mode: difference; } .scanlines::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: repeating-linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, 0.05) .5%, transparent 1% ); animation: fudge 7s ease-in-out alternate infinite; } @keyframes fudge { from { transform: translate(0px, 0px); } to { transform: translate(0px, 2%); } } .glow { @extend .glitch; text-shadow: 0 0 1000px rgb(223, 191, 191); color: transparent; position: absolute; top: 0; } .subtitle { font-family: Arial, Helvetica, sans-serif; font-weight: 100; font-size: .8vw; color: rgba(165, 141, 141, .4); text-transform: uppercase; letter-spacing: 1em; text-align: center; position: absolute; left: 17%; animation: glitch-2 5s 5.02s infinite; } @keyframes glitch-2 { 1%{ transform: rotateX(10deg) skewX(70deg); } 2%{ transform: rotateX(0deg) skewX(0deg); } } </style> <div class="container"> <div class="glitch" data-text="ELISABÉTH">ELISABÉTH</div> <div class="glow">ELISABÉTH</div> <p class="subtitle">IMPRACTICAL DEVELOPER</p> </div> <div class="scanlines"></div> Might work for you, but had to disable a few lines so that it's a part of the page, but you can experiment. (FYI The CSS needs to go inside <style></style> tags.) Hope that helps!

Add this to your Custom CSS: .products.collection-content-wrapper { padding-top: 1vw; } Hope that helps!

Can you share your website URL? Have you got any Custom CSS or other code added?

You don't need code for that, it's just in the settings...

I'm not sure why that would be happening, but you have a lot of CSS and it's always possible that there is a conflict that would have the effect of the opposite happening. It's never easy to debug someone else's code when you're not always aware of the intention behind every line of code.

You could use: text-decoration:underline; or: border-bottom: 3px solid red;

Hi @gullbekken, you need to use font-style: italic; rather than text:italic; Add this to your Custom CSS: .header-menu-nav-folder-content a:hover { font-style:italic; } Hope that helps!

This strikes me as being tricky to achieve, I'm certainly not aware of a way to move content into that space.

It's a separate issue that was there before, the code I suggested you remove only affected the header logo. I would try adding a margin-right, this should work: .sqs-block-image .design-layout-collage:not(.sqs-narrow-width).image-position-left .image-card { margin-right: 5%; } But you probably want to place the margin-right in the code targeting the sections more specifically than I have.

Target the block ID and put {visibility:hidden;} i.e. in Custom CSS #blockID-903402i4j23 { visibility:hidden; } Guide here: https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one

Yeah, my bad, that just won't work, the images don't fill the space like I would want. Right, here's an alternative that does work well! And should get you the look you want: https://www.will-myers.com/articles/super-easy-image-slider-in-squarespace-71-squarespace-70-brine-template

Try this guide, SQPS makes it pretty easy: https://support.squarespace.com/hc/en-us/articles/205815608-Using-Google-Analytics-with-Squarespace

No, not effectively. If it's on the internet it is copyable by anyone with a few seconds to spare.

Can you group them as suggested here: I would like to think that this plug would work for you, but I would reach out to them to check whether it would meet your need: https://www.squarewebsites.org/squarespace-plugins/lazy-summaries

Sounds like it might be a bug, have you reported it to Squarespace support? https://support.squarespace.com/hc/en-us/requests/new#choose-topic

Well you can try this to get started in your Custom CSS: .tweak-mobile-overlay-menu-secondary-style-button:not(.tweak-mobile-overlay-menu-secondary-inherit).tweak-mobile-overlay-menu-secondary-button-style-solid .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item { margin-left: auto; margin-right: auto; } Let me know if that doesn't work, or if it does!

@ryannell Hopefully we can get this fixed for you, can you share your website URL?

Can you share your website URL? Have you got the section set to fill screen?

That section looks like it is set to Large. Click on Edit section, and change from L to S. Or click the toggle for Fill screen. Sorry I wasn't addressing the issue you were referring to, but the problem I was highlighting is as big a problem on tablet: https://www.loom.com/share/c471d5c1841d48e7912843471810aced You can see more than half the white space is caused by the text block issue, and half by the section being set to Large.

Can you share your website URL? and where you're trying to add the gallery?

Did you watch that video I sent and try that fix? If you did and that didn't work, here's another explainer: and a chrome extension that can help: https://chrome.google.com/webstore/detail/fluid-engine-tablet-spaci/gemmfnoajaghnaddkccmekbchdgckdab Optimizing in phone view is not enough when you have large blocks of text.

I've split up your Custom CSS to have just the left/right affecting desktop, and the top/bottom just affecting mobile. Hopefully you can see what I've done, and adjust it to work for you. Let me know if this works, give me a thumbs up if it does! // Desktop @media only screen and (min-width:768px) { #block-yui_3_17_2_1_1666941010634_110861 { margin-right: -17px; z-index:99; } #block-yui_3_17_2_1_1666941010634_113072 { margin-left: -17px; z-index:99; } } // Mobile @media only screen and (max-width:768px) { #block-yui_3_17_2_1_1666941010634_110861 { margin-top:-40px; margin-bottom:-40px; z-index:99; } #block-yui_3_17_2_1_1666941010634_113072 { margin-top:-40px; margin-bottom:-40px; z-index:99; } }

It's CSS, same as the padding. Put the lines of custom CSS within the media query. Something like this: @media only screen and (min-width:768px) { #block-yui_3_17_2_1_1666941998979_1830 { padding:-17px; } } If you can provide the padding CSS that you've added I might be able to adjust if for you.