DavvaMC

Thanks, I think I have sorted it now. Much appreciaed.

Yes I finally worked out how to do it this morning.

I would also like to know how to do this.

Great thanks for your help.

Sorry I am also trying to change the width of the orange button, when viewed on smaller screens the text wraps. Thanks

Hi I have added custom css to display a background image when viewed on smaller screens. When I view through a responsive tester and view the ource code it says the image being used is he desktop image? Here is my code @media only screen and (max-width: 1024px) { section[data-section-id="6673e1f8a3a59808965c32da"] .section-background img { opacity:0 !important; } section[data-section-id="6673e1f8a3a59808965c32da"] .section-background { background-image:url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/6673f279c0893213adf3ed95/1718874746151/hero-home-mobile.jpg') !important; background-size: contain; background-position: 40% 100%; background-repeat: no-repeat; } section[data-section-id="6673e1f8a3a59808965c32da"] .sqs-block-button-container { border: 1px solid red; } } What am I missing? Please view here - https://www.cn8.co.uk/new-home Many thanks

How would we acheive this to target sizes like below? 768px 810px 1024px It only seems to work for small screen sizes. Thanks

Hi I have an unordered list in my footer with separaors in between each link. Have been trying to remove the last separator from the last link but with no joy. This is what I have. footer ul { display: flex; list-style-type: none !important; margin: 0 !important; padding: 0 0 10px 0 !important } footer ul li p:before { display: none !important; } footer ul li p { display: inline !important; list-style-type: none !important; padding: 0 !important; } footer p { color: #fff !important; font-size: 0.9rem; margin: 0 !important; padding: 0 !important; } footer li:after { content: " | "; padding-right: 8px; } footer li:last-of-type { content: ""; } footer .content-wrapper li a { color: #fff !important; font-size: 0.9rem; font-weight: normal; text-decoration: none !important; } footer .content-wrapper a:hover { color: #ff662f !important; } footer .content-wrapper a:active { color: #ff662f; } What am I doing wrong? Much appreciated.

Hi Can't for the life of me get the rollover colors on links to work with custom code. This is what I currently have. } .header-nav-item a { color: #fff; } .header-nav-iem a:hover{ color: #000 !important; } .header-nav-iem a:active{ color: #ff662f !important; } /*MOBILE MENU*/ .header-menu-nav-item a, a .header-menu-nav-item-content { font-size: 14px; text-decoration: none !important; } nav.header-menu-nav-list .header-menu-nav-item * { background-image: none !important; text-decoration: none !important; border: none !important; } .header-menu-cta { color: #ff662f !important; padding-bottom: 15vh !important; } .header-menu-cta a.theme-btn--primary.btn { color: #ff662f !important; background-color: transparent !important; border: 1px solid #fff !important; } .header--menu-nav-item-active a{color:#7bb6b1!important;} /*END MOBILE MENU*/ I also need to change the rollover fo the CTA button when you open the mobile menu. Any ideas as to what I am doing wrong? https://www.cn8.co.uk/new-home Thanks

Thanks, I will give it a go.

Thanks, I have selected no-gap and horizinal gap = 11 But the image and blach boxes also need the same gap. But if I do that the text above the image blocks space increasing and I cannot then align the sub text closer to the title as it is snapping to the grid! Phewww hope that make sense!

Here is the page the footer ul also has bullets that I cannot get rid of 😞 https://www.cn8.co.uk/new-home PW: KINO-CN8 Thanks

Thanks if I select no-gap it means when i add an image and text blcok in one halpf and an image and text blok in another half the vertical gap is also 0. Would I need to add custom cs to give a space in between (vertically) Hope that makes sense.

Hi Could someoe help or lead me in the right direction to add a <ul> list menu of links to my footer. They need to display inline on desktop and then stack on mobile. Below is what I have so far, but nothing works. Also when I view the code in Chrome, each list item has a <p> tag with it? footer li { display: inline !important; list-style: none !important; } footer li a { color: #fff !important; font-size: 0.9rem; text-decoration: none !important; } footer li:after { content: " | "; } footer li:last-child { content: ""; } Much appreciaed!

Hi I am uing Fluid Egine to layout my pages. But it seems that for example if I add an image the a text block beeath that I can position it so in touches he botom of the image as it seems to snap to the grid size I have got. Finding myelf using loads of CSS to position elements precisely. Am I doing something wrong? Thanks

ahhhhhhh! Yes you were right their was some pesky CSS in custom code for all fluid images! Thanks

Hi Not sure if their is a setting in global I need to change but every image I add it creates a lot of paddig around it, it seems like it is snappng to the grid with the boundig box and not hugging the image. This is driving me crazy, please see screenshot. Is their anything that can be done about this? Thanks

Thanks.

Hi I am working o a new design for our Squarespace site - www.cn8.co.uk I have added a landing page, the client has just said that if someone goes to www.cn8.co.uk/about it says page not found as I had to disable these pages until the ew site has been built. Should I set up 302 redirects that takes them to the labding page, and can I revere these when I am ready to go live with the new site? Thanks

Also the footer block is far too tall, I cannot reduce the amount of rows below 5 for some reason, so I take it I have to do this with custom css? What would I need to add? Thanks again!

Thak, do yu see the page on this link? https://kumquat-lute-gky8.squarespace.com/home-1

Hi I am trying to add a png icon image to my footer. The PG image is cropped to the edges of the icon, but when I add this to the footer it seems to have lots of padding around it and when I am trying to align it to the right it does not but up against the right hand side. Any ideas as to what is happening here. Here is the PNG - https://images.squarespace-cdn.com/content/v1/5fec63b71c227637fcd74134/7328d7d3-4854-4f2b-87f5-d0084b5c3a89/logo-icon.png?format=500w And attached is what I am seeing in he editor. Many Thanks

Thaks, it startig to look better now, however when viewed on 810px and 1024px there is a big gap between the text and the swan image can this be reduced, or do I have to create other images for different sizes? Thanks again.

So create a 2560px wide image as recommended by SP, but have the swan centrally aligned. Do I need to consdider height dimensions when I create the image?

Thanks, I will give it a go and get back to you if you don't mind, this has been driving me crazy for ages now trying to get it right 🙂