Different footers for Desktop / Mobile - Responsive but with dead space

Site URL: http://torchglow.video

PW: T0rchgl0w

I have been playing around with footers and was having trouble making it look good across all devices, so I decided to make two footers and assign one to Desktop and one to Mobile.

I designed the footers using Code Blocks and assigned different id's to each.

Technically it works, but on desktop there is a ton of dead space under the footer, and on mobile there is a ton of dead space above it.

Any ideas on how to clean that up? Here is the code I'm using:

/*Footer*/
#footer-text
{font-family: 'DMMono-Regular';
font-size: 13px;
color: #D6D6D6;
}
a:hover {
    color: #F86A4A !important;
}

#footer-text-mobile
{font-family: 'DMMono-Regular';
font-size: 13px;
color: #D6D6D6;
}
a:hover {
    color: #F86A4A !important;
}

.footer-logo img{
  height: 15px !important;
  width: 32.5px !important;
  padding: 0px;
}
    #footer-text {display: block;}
    #footer-text-mobile {display: none;}

    @media screen and (max-width: 768px) {

    #footer-text {display: none;}
    #footer-text-mobile {display: block;}

    }

It's because even though you are correctly hiding the mobile content for desktop display (and vice versa), the "section" which is containing the mobile footer content, and all it's accompanying padding still exist and are being shown. You want to hide the whole section, rather than just the inner div you made. However, targeting specific sections is where i get fuzzy, squarespace doesn't make that super easy and it's what i'm currently struggling with in my own site. Hope that at least gets you a direction to in. 

Ah! I think you're on to something. I used the Chrome extension Squarespace Collection/Block Identifier to find the div id for each footer section (comes in handy BTW, highly recommend). I updated my code accordingly and it still looks the same. If I find the solution I'll update this thread!

Maybe there is a different 'display' attribute that would totally remove the section...🤔

#block-yui_3_17_2_1_1616001525201_4948 {display: block;}
    #block-e5fffd4f1f1d6a04b0d6 {display: none;}

    @media screen and (max-width: 799px) {

    #block-yui_3_17_2_1_1616001525201_4948 {display: none;}
    #block-e5fffd4f1f1d6a04b0d6 {display: block;}
    }

Do you still need help?

Hi there,

I realise this thread is from quite a while ago, but hoping someone may have a solution to the original question.

I am hoping to implement a similar workaround to have a different footer for desktop vs mobile. I've currently created a seperate section for the mobile footer and have used CSS to hide/show this and the desktop footer for each page. This however means that if I need to update anything at all in the mobile footer I have to do it on every single page, not just once in the footer which is of course very impractical.

Site URL: www.thompsonlane.com.au

Thank you 🙂

On 11/26/2023 at 7:57 AM, Cas91 said:

Hi there,

I realise this thread is from quite a while ago, but hoping someone may have a solution to the original question.

I am hoping to implement a similar workaround to have a different footer for desktop vs mobile. I've currently created a seperate section for the mobile footer and have used CSS to hide/show this and the desktop footer for each page. This however means that if I need to update anything at all in the mobile footer I have to do it on every single page, not just once in the footer which is of course very impractical.

Site URL: www.thompsonlane.com.au

Thank you 🙂

So your problem is remove space or update content across the page?

On 11/27/2023 at 7:09 PM, tuanphan said:

So your problem is remove space or update content across the page?

Hi Tuan,

Apologies I didn't have notifications on and just saw your reply.

Ideally to remove the blank space mentioned in the OP and that way I can add the content for my mobile footer into the actual footer section.

Thanks,

Cas

On 12/4/2023 at 3:50 AM, Cas91 said:

Hi Tuan,

Apologies I didn't have notifications on and just saw your reply.

Ideally to remove the blank space mentioned in the OP and that way I can add the content for my mobile footer into the actual footer section.

Thanks,

Cas

Which blank space? It looks fine to me

On 12/5/2023 at 6:28 PM, tuanphan said:

Which blank space? It looks fine to me

There is no blank space currently as I don't want to change it over unless I know there is a solution for it.

I've currently created a seperate section on each page for the mobile footer (not in the footer section itself) and have used CSS to hide/show this and the desktop footer for each page. I would like to be able to add this information to the footer section itself so that any changes can be implemented sitewide rather than me having to edit every page individually.

My understanding from the original question is that if I was to add all of the info into the footer and use the code to hide the sections, it will then leave the blank spaces which I am hoping to confirm if I can hide before going through and changing everything.