Jump to content

Footer Responsive Layout

Recommended Posts

Site URL: https://pte.squarespace.com/

I managed to get the footer looking great for desktop, but can someone please help me clean up the look for Mobile (767 px). I would simply like to stack the Page Links off to the right side, mirroring the Part Time Evil Logo. 

Example: (Preferably the Part Time Evil logo and the About Link start on the same line.)

PART TIME EVIL                                                                                                                                                                                                           

^ABOUT

^WORK

^BLOG

^CAREERS

^CONTACT

I made the page links in a Code Block and attached a class = "menuop" for the buttons so they can be manipulated. I'm just having trouble getting the links to stack correctly and fitting the Part Time Evil logo next to the stacked page links. All of my custom CSS is at the very bottom of the Custom CSS window. (As well as within the code block.)

Thanks!

 

 

 

647453331_Screenshot(22).thumb.png.6ebd68c48604132cc413ae57b3b9ded1.png879315391_Screenshot(20).thumb.png.0d69f90be71aa286bc79d302ef6a40b7.png256024643_Screenshot(23).thumb.png.62740e0154abbfb636d2b0f48de51659.png)

Edited by pbueno24
Link to comment
  • Replies 3
  • Views 702
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

/* Stacked mobile footer links */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1639082713344_30712 h4 {
    display: flex;
    flex-direction: column;
}
a.menuop {
    margin-top: 5px;
    margin-bottom: 5px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* Footer mobile layout */
@media screen and (max-width:767px) {
div#block-fabc92ddc30f0383cfa9+.row>.col {
    width: 50% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.