justinjamesclack

Maybe it's in a code block on the page or each page. Otherwise you can target font colour using css in the custom css panel.

Hey @Emm Add the image block, and then the text block below the image, then add the following code to the image block, which should then add transparency to the image and show the text beneath. @media only screen and (min-width: 640px) { #block-12345 { opacity: 0 !important; transition: opacity 1s !important; } #block-12345:hover { opacity: 1 !important; transition: opacity 1s !important; } }

Has this worked?

Try adding !important in the padding line of code

Try this code, but mess around with the padding line of code. And just so you are away the padding figures go from top > right > bottom > left. Top (1vw) - Right (4vw) - Bottom (1vw) - Left (1vw) .gallery-grid[data-width="inset"] { max-width: 1920px; padding: 1vw 4vw 1vw 4vw; margin-left: auto; margin-right: auto; }

What is the url for your website? You can just change the gap between sections by editing the sections and customising the height of the section. You can completely remove the margin, by turning off the fill screen (see image below) and then adjusting all the content of each section to suit.

What are the aspect ratios?

The only things I can think of then is, try removing your css in the custom css panel, save it in a wordpad or something and then click save on the custom css panel. Reload the page and see if you can add a block to the footer then. If you still can't add a block, then you may as well add your css back in the custom css panel. And then the only option is to add a new section above the footer and recreate the footer in a normal section. The only issue with this option, is that you'd have to save the section and add them on each page (this option is worst case scenario and sucks).

So you can't add any block at all?

Try adding the custom button using the code above. Put the code in a code block and change the colours, text and url to whatever you choose. If you want a native button, and we can't figure it out, you may need someone to come in as a contributor to the site and check things over and potentially add the button.

That's very strange! Can you add me as a contributor so I can have a look. This is very abnormal

Okay, so if the button isn't working it might be that the colours are the same as the background colour, or the button might be hidden

And also you can change the colours too

Otherwise you can create a button using html and css. For example this is the button I use and have created using html and css; <style> .container-button { display: grid; place-items: center; } .animated-button { position: relative; display: flex; align-items: center; gap: 4px; padding: 10px 36px; border: 4px solid; border-color: transparent; font-size: 18px; background-color: transparent; border-radius: 10px; font-weight: 500; color: #151515; box-shadow: 0 0 0 1px #151515; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button svg { position: absolute; width: 24px; fill: #151515; z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button .arr-1 { right: 16px; } .animated-button .arr-2 { left: -25%; } .animated-button .text { position: relative; z-index: 1; transform: translateX(-12px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button:hover { box-shadow: 0 0 0 12px transparent; color: #F1F3F6; border-radius: 10px; background-color: #151515; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button:hover .arr-1 { right: -25%; } .animated-button:hover .arr-2 { left: 16px; } .animated-button:hover .text { transform: translateX(12px); transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .animated-button:hover svg { fill: #F1F3F6; } .animated-button:active { scale: 0.95; box-shadow: 0 0 0 4px #EE7F01; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } </style> <a href="https://calendly.com/justinjamescreative/discovery-call" target="_blank"> <container class="container-button"> <button class="animated-button"> <svg viewBox="-3 -3 26 26" class="arr-2" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" ></path> </svg> <span class="text">Free Quote</span> <svg viewBox="-3 -3 26 26" class="arr-1" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" ></path> </svg> </button> </container> </a> Obviously change the text in the span class and the url in the a href= line

If you edit the footer, you can add a button in the add block panel