Footer Navigation

Hi all,

I'm attempting some CSS on my footer without much experience. I've searched through the forums for a solution and haven't found anything yet. I'm in 7.1.

On the footer on my site, I have several text boxes side-by-side (some with links). In desktop mode, as the page is shrunk, the text of starts wrapping. I don't want it to wrap, but I've gotten around this by just making the text boxes wider. However, as the page shrinks, the text boxes begin to overlap, before finally a minimum width is reached, and the organization changes to vertical stacks of boxes.

I'm thinking the easiest option would be to change the width of the page at which the organization changes to vertical stacks of boxes, so it can shift before my text boxes begin to overlap. I'd also like to be able to even out the spacing of elements once they shift into this vertical mode, as you can see the social links are too close to the email. II've been unable to find code to let me do all of this. Would be super helpful if you've got any suggestions! 

Hi,

What is site url?

the URL is "https://meteorfilms.squarespace.com/"

On 5/18/2023 at 10:15 PM, cfcfcfcf said:

the URL is "https://meteorfilms.squarespace.com/"

What should it look like? How about making these to 2 rows?

Thanks for the quick reply! 

The goal is for the blocks of text on the footer to stay on one line at full width, and then as the width of the page decreases, the point at which the blocks to shift to vertical stack would be before the text blocks start to overlap each other. 

So I think knowing how to change the page width at which the text blocks in the footer shift to vertical stacks would be what I'm looking for?

Add to Design > Custom CSS

/* Fluid Engine Stacked */
 @media screen and (max-width:1100px) and (min-width:992px) {
  .fe-633b1d755ad531ebbc95789d>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.fe-633b1d755ad531ebbc95789d {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}}

This code will run from 1100px to 992px

Thank you! Works great.