Jordy_TheShop

This worked for me. Thanks!

Hi Tuan, I tried your code however seem to run into problems with the border. It becomes cut off (see attached screenshot). Do you know of any other ways to get this to work? Thanks, Jordy 🙂

Site URL: https://www.aghlaw.com.au/document-packs Hi, I'm looking to find if it is possible to add images or icons inside code blocks? My client wants to add company logos inside of each of the boxes on their services page (see screenshot). Each box is an individual service package that requires a different logo in each box. Any help would be appreciated! Thanks, Jordan

Sorry about that! Site is now available – PW: abc123. Thank you 🙂

Site URL: https://papaya-toucan-w78e.squarespace.com/store/p/vase-gw65w Hi, I am wondering if anyone knows a solution to adding a section border on the product page. I'm trying to add a full-width section border below the product image and description, but before the additional content. I've tried the regular section border code which I use on other pages (see below) and this isn't doing the trick. I've also attached a screenshot for reference. Any help would be appreciated! CSS I would generally use: [data-section-id="61ea8fcf58b76c24c766ddb1"] {border-bottom:1px solid #262626; overflow: hidden; } Thanks, Jordy

Thanks for your clarification 🙂

Site URL: https://www.growpl.com.au/home Site: https://www.growpl.com.au/home Hi everyone, I'm looking for help with some styling inside a code block. Inside the Code Block is an embedded Checkout Form which is styled as a Button/Lightbox. When the customer clicks the Button the form opens up. The Button is working perfectly however doesn't match the styling of the rest of the site. Ideally, I'd like to match the Code Block Button with the in-house Squarespace Buttons. If this is not possible, ideally I'm looking for a way to at least match the fonts and font styling. The font is Lora. I've got some screen shots attached to help. Any help is much appreciated! Thanks, Jordy

Awesome. Thank you! 🙂

Hey! Thanks for your help. I managed to solve the problem by using a section of your code. This is the part I used: @media only screen and (min-width: 768px) { .header-nav .header-nav-list { flex-direction: column; } } When I used the rest of the code, the header items were pushed over to the left of page even on larger monitors. As the rest of the website content width is quite narrow, this looked a little off (I preferred to keep the header width narrow as well). I hope this makes sense – in summary your code helped solve my issue. Thanks, Jordy!

Hi there, I'm trying to create a Sidebar Nav in 7.1. The way I'm approaching this is by using a Transparent Fixed Header with all nav links in the header left aligned. I'm almost there, however the final issue I have is I need to 'stack' the navigation elements down the side so the sidebar doesn't overlap the page content. I'm building this effect to be on desktop and tablet only. Site URL: carnation-parsnip-br2g.squarespace.com PW: abc123 I've got the following code so far: //HEADER STYLING START// .header-title-text { text-align: left; } .header-title-nav-wrapper { margin-left: 0 !important; } .header-nav { text-align: left !important; } @media screen and (min-width: 800px) { .header { background: transparent!important; } } //HEADER STYLING END// Any help would be much appreciated, and if anyone has any comments on the functionality or better ways to achieve this look please let me know – I'm still new to CSS. Thanks, Jordy 🙂

Thank you! Have a wonderful day. 🙂

Hi @tuanphan I'm seeking this same effect to create a 'sidebar nav' however this did not fully work for me. Whilst my nav links are working, my site title is not fully to the left of the page. Any ideas? Site:https://carnation-parsnip-br2g.squarespace.com/ PW: abc123 Your help is much appreciated! Thanks, Jordy

Site URL: https://idealog.com.au/ Hi, I'm working with a client on a Personal Subscription. I'm looking to see if there is a way to centre mobile-only text but only on specific pages. My client has a blog page, and I'd like to centre the mobile text on all pages except the blog page to keep it left aligned for better reading. Is there a way to do this or will I have to enter every page's individual section manually? Thanks, Jordy 🙂

Yes I did – I ended up noodling around and the following CSS worked for anyone else needing this effect. //MARQUEE START// .marquee { position: relative; width: 100vw; max-width: 100%; height: 40px; padding-top: 0px !important; overflow: hidden; } .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } //MARQUEE END// Thanks, Jordy 🙂

Hi, I'm having trouble with a rotating text marquee on my site. I've successfully managed to put the marquee in using a code block, however I have site overflow and not sure how to fix it. I've tried fiddling the max width but no luck. Any help would be much appreciated. HTML: <h3> <div class="marquee"> <div class="track"> <div class="content">&nbsp;SEO • MARKETING • WEB DESIGN • SOCIAL MEDIA MANAGEMENT • CONTENT CREATION • EMAIL • WEB DEV • PHOTOGRAPHY • VIDEO • SEO • MARKETING • WEB DESIGN • SOCIAL MEDIA MANAGEMENT • CONTENT CREATION • EMAIL • WEB DEV • PHOTOGRAPHY • VIDEO</div> CSS: //MARQUEE START// .marquee { position: center; width: 150vw; max-width: none; height: 40px; padding-top: 3px !important; overflow-x: hidden; } .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } //MARQUEE END//