Jump to content

Align footer elements differently on mobile vs desktop

By MAC1, in Customize with code

Go to solution Solved by Lesum,

Recommended Posts

MAC1 Level 5

MAC1

Posted
Posted (edited)

Hi,

I was hoping to have different alignments for these 4 elements when the website changes from desktop to mobile
1. copyright (align right on desktop, align left on mobile)
2. social buttons (align left on desktop, align center on mobile)
3. request quote button (align left on desktop, align center on mobile)
4. greyed out logo (align left on desktop, align center on mobile)
footer_desktop.thumb.jpg.53699d0cb7928cd5e8f881708081d136.jpg

desired outcome for footer with its own alignments
footer2_after-align.thumb.jpg.ccafeb3668c94c49dd89fd87597720f9.jpg
If i make the align changes in editor for desktop it applies it to mobile also. so i was wondering if there was code to change alignments to these elements when its mobile vs desktop.

website:
https://ellipse-teal-dl5w.squarespace.com/motion
pass: 
blubblub

thanks


footer at the moment because of desktop alignments

footer1_beforealign.jpg

Edited by MAC1
Link to comment
  • Replies 4
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum
Lesum

@MAC1 Here's the solution to change alignments on mobile: @media only screen and (max-width: 767px) { #block-2b059365d46e862197d3 p { text-align: left !important; } #block-yui_3_17_2_1_1691505

MAC1
MAC1

thank you all looks great, although the button alignment "request a quote" (no.3 on pics) hasn't been targeted in the css code. what is the block id for the button? cheers

Lesum
Lesum

Hey, try again. I updated the code. block id for the button:  #block-yui_3_17_2_1_1691745460420_10692

Posted Images

  • Solution
Lesum Level 9

Lesum

Posted
  • Solution
Posted (edited)

@MAC1 Here's the solution to change alignments on mobile: 

@media only screen and (max-width: 767px) {
	#block-2b059365d46e862197d3 p {
		text-align: left !important;
	}
	#block-yui_3_17_2_1_1691505298482_47848 .social-icon-alignment-left .sqs-svg-icon--list {
		text-align: center !important;
	}
	#block-yui_3_17_2_1_1691745460420_10692 .sqs-block-button-container {
		justify-content: center !important;
	}
}

 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer
☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources