Twitter in footer design

Hi everyone, 

At the moment I have a simple footer, not too cluttered, but I could do with embedding the twitter feed for people to see. When I add the Twitter feed it looks pretty awful, I'm jut not sure how to style it better. 

Does anyone have any design ideas, column suggestions or coded footers to make the it look better? 

https://oarfish-salmon-gpgd.squarespace.com

password: criminaljustice

Thank you 🙂 

Did you remove Twitter feed?

Yes, I just left it off for now. I can add back in when I’m back in my laptop later if need be. 

I've added Twitter back on.

Can you add twitter feed & describe the desired layout?

Hi @tuanphan

You should see the twitter feed in the top footer block, doesn’t look great. 

Ideally something that perhaps puts the footer into columns but not too deep if possible. I suppose I’m just wanting something understated as I don’t want the footer to stand out above everything else. Some colour there would be ok but not too overpowering. 

I’m not keen on the twitter feed in the footer but not sure where else to put it really.

many thanks. 

15 hours ago, Icclebug said:

Hi @tuanphan

You should see the twitter feed in the top footer block, doesn’t look great. 

Ideally something that perhaps puts the footer into columns but not too deep if possible. I suppose I’m just wanting something understated as I don’t want the footer to stand out above everything else. Some colour there would be ok but not too overpowering. 

I’m not keen on the twitter feed in the footer but not sure where else to put it really.

many thanks. 

Do you have an example with twitter feed layout? I have no ideal to make it nice..

I’ll have a think and find some examples. I’m not entirely happy with having the twitter feed in the footer, I think it’s a waste of time, but my friend is keen on the idea. 

Hi @tuanphan

I've mocked something up with 3 columns in photoshop - not sure if it looks any good, but it's a start.

I don't want it cluttered with too much, just a simple twitter feed with other basic necessary information. I'm open to a coloured background but if not, white is fine or a pale grey. Maybe just some way of separating from the sections above the footer.

Obviously, I'm open to suggestions See what you think and thank you again. 

You can add Twitter above Social, then I can give CSS flex to make layout same as screenshot.

Hi @tuanphan

I've added it back into top footer. Thank you

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.Footer-inner.clear {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Footer-inner.clear>div {
    width: 33.33%;
}
}

Thank you!, that's split into 3 equal columns. Just need to sort the spacing and sizing out. 

@media screen and (min-width:641px) {
.Footer-inner.clear {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/* Icons */
.Footer-middle {
    width: 30%;
}
div#footerBlocksBottom, div#footerBlocksTop {
    width: 35%;
}
/* Twitter */
div#block-yui_3_17_2_1_1591777007698_3773 {
    width: 100%;
    padding-top: 20px;
}
}

Fantastic, thank you. I've removed for now and will play around with it later on. 

Linked to this, when you turn the phone onto landscape you can see the footer all the way around the edges, any ideas? 

On 6/10/2020 at 4:29 PM, Icclebug said:

Fantastic, thank you. I've removed for now and will play around with it later on. 

Linked to this, when you turn the phone onto landscape you can see the footer all the way around the edges, any ideas? 

Seems fine here. Which page?

Hi @tuanphan

seems to be every page on the mobile in landscape only. Doesn't appear to be a big issue but I thought it was worth asking. 

Thank you