Change order of footer nav/middle blocks

Site URL: https://beth-howley.squarespace.com/config/pages

Hi! Is there a way I can change the order of the footer middle block and the footer nav block so that the middle block (has the logo) is on the left and the nav is to the right. I attached screenshots of how it looks now vs how I would like it to look. I'm using the Brine template. 

Thank you!

Current footer:

How I'd like the footer:

Hi,

I see you changed footer layout?

@tuanphan Sorry, I was editing the new template in preview mode. I made the new site live now. It's http://www.bethhowleycreative.com and the password is: michbren. Thanks!

On 9/23/2021 at 3:36 AM, angelamanderson22 said:

@tuanphan Sorry, I was editing the new template in preview mode. I made the new site live now. It's http://www.bethhowleycreative.com and the password is: michbren. Thanks!

Add to Design > Custom CSS

/* Footer layout */
div.Footer-middle {
    flex-direction: row-reverse;
}
div#footerBlocksMiddle>.row {
    display: flex;
    flex-direction: row-reverse;
}

Thank you so much! Do you know how to make the logo sit on top of the nav on mobile instead of to the side?

Thank you so much!

Another question - Do you know how to center the footer nav under the logo?

Thanks!

On 9/28/2021 at 6:44 AM, angelamanderson22 said:

Thank you so much!

Add to Design > Custom CSS

@media screen and (max-width:640px) {
nav.Footer-nav * {
    width: 100% !important;
    text-align: center !important;
    max-width: unset !important;
}
}

Another question - can I target the image in the middle footer block to adjust the width?

The logo right now is blurry because I had to save it as a smaller file size (150x150 px) for it to look the way I wanted it to (about the same height as the nav). But ideally I would like to upload a larger image and then target it with css and adjust the width so it will be the right size and not blurry.

Thanks!

On 10/28/2021 at 8:32 AM, angelamanderson22 said:

Another question - can I target the image in the middle footer block to adjust the width?

The logo right now is blurry because I had to save it as a smaller file size (150x150 px) for it to look the way I wanted it to (about the same height as the nav). But ideally I would like to upload a larger image and then target it with css and adjust the width so it will be the right size and not blurry.

Thanks!

Use this code. It will target all image in Footer

div#footerBlocksMiddle .image-block {
    width: 30%;
}