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