Jump to content

Stacked Mobile Footer

Recommended Posts

  • Replies 9
  • Views 943
  • Created
  • Last Reply
10 hours ago, thirdeyegyps said:

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

Hi everyone,

I'm trying to make my footer nav in mobile version stacked on top of each other or "column" style instead of next to each and bunched together. Any idea what the code would be for this. I'm only trying to make it the stacked style in the mobile version. Thanks so much!

Password to website: brineintopedro

Add to Design > Custom CSS

/* Mobile-Footer-Nav links */
@media screen and (max-width:640px) {
.Footer-nav-group {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
a.Footer-nav-item {
    width: 100% !important;
    line-height: 1em;
}
}

 

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
18 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Mobile-Footer-Nav links */
@media screen and (max-width:640px) {
.Footer-nav-group {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
a.Footer-nav-item {
    width: 100% !important;
    line-height: 1em;
}
}

 

Tuanphan. you rock. One more question for you, how would I get the buttons on the Home, Science, and About page to go directly under the images rather than stacked on top of each other below the group of images? I cannot figure this out  for the life of me. Thanks!!!

password: brineintopedro

Link to comment
On 5/17/2021 at 11:08 AM, thirdeyegyps said:

Tuanphan. you rock. One more question for you, how would I get the buttons on the Home, Science, and About page to go directly under the images rather than stacked on top of each other below the group of images? I cannot figure this out  for the life of me. Thanks!!!

password: brineintopedro

Hi. Which buttons? Can you take a screenshot. I see many buttons..

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
7 hours ago, thirdeyegyps said:

Yes of course. The three buttons on the home page. They look great on the home page. However, when I go to view it in mobile the buttons stack. I attached a photo!

Screen Shot 2021-05-18 at 3.13.23 PM.png

Screen Shot 2021-05-18 at 3.13.43 PM.png

You want the button to be below the corresponding image, on mobile?

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
  • Susana_SQSP changed the title to Stacked Mobile Footer
On 5/20/2021 at 9:28 AM, thirdeyegyps said:

Yes, correct!

Will need to adjust a bit your layout. No need to use code. Can you duplicate the site & add me as a contributor (Content Editor is enough) on the duplicated site? I think I will make a video on how to adjust layout.

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
7 hours ago, tuanphan said:

Will need to adjust a bit your layout. No need to use code. Can you duplicate the site & add me as a contributor (Content Editor is enough) on the duplicated site? I think I will make a video on how to adjust layout.

Yes I just duplicated it! What is your email so I can send contributor request? 🙂

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.