Jump to content

Keep Mobile Footer Text and Image Next to Each Other

Recommended Posts

Site URL: https://delanydesigns.com

Password: 123456

I’m trying to get the text and image in my mobile footer to go next to each other, but I can’t get it to work.

I’ve placed the blocks next to each other and set the width of the text (and social media icons) blocks to 50vw and the width of the image block to 20vw. With the mobile footer side margins set to 10vw, the total for the margins and content is 90vw. That should mean that there’s enough space left over for the text and image to sit next to each other, but for some reason the image is bumped down below the text (both in the mobile preview on the desktop Squarespace editor and on my iPhone when I load my website in Safari).

All the custom CSS that I’ve done for the footer is below. I know it’s a lot, but I decided to include all of it just in case.

//Footer//
footer.sections {
  section {
    min-height: unset !important;
  }
  section .content-wrapper {
    padding: 0 0 2rem 0 !important;
    margin: 0 7.5vw 0 7.5vw !important;
  }
  a {
    font-weight: 500 !important;
  }
}

section[data-section-id="620b2b4c0b17db5c830aba97"] {
  padding: 0 !important;
  margin: 0 !important;
}

	//Company Name Text Block//
	#block-a313b4b5156e6ffd6767 {
      padding: 0 !important;
      margin: 0 !important;
	}

	#block-a313b4b5156e6ffd6767 h4 {
      font-size: 1.25rem !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
	}

	//Hidden Spacer Block//
	#block-yui_3_17_2_1_1645223809885_8480 {
      display: none !important;
	}

	//Address and Contact Info. Text Block//		
	#block-yui_3_17_2_1_1645223809885_12720 {
      padding: 0.625rem 0 0 0 !important;
      margin: 0 !important;
	}

	#block-yui_3_17_2_1_1645223809885_12720 p {
      font-size: 1rem !important;
      font-weight: 400 !important;
	}

	//Social Media Icons Block//
	#block-yui_3_17_2_1_1644900073520_11304 {
      padding: 0.5rem 0 0 0 !important;
      margin: 0 !important;
	}

	.sqs-svg-icon--wrapper:hover .sqs-use--icon {
      fill: #941215 !important;
	}

	//Logo Image Block//
	#block-yui_3_17_2_1_1645144314791_120592 {
      padding: 0 !important;
      margin: 0 !important;
      width: 6.5rem !important;
	}

	//Copyright Info. Text Block//
	#block-620c1f758d973d6e37c14f48 {
      padding: 2rem 0 0 0 !important;
      margin: 0 !important;
	}

	#block-620c1f758d973d6e37c14f48 p {
      font-size: 0.875rem !important;
      font-weight: 400 !important;
	}

	//Hidden Spacer Block//
	#block-yui_3_17_2_1_1645639093105_12783 {
      display: none !important;
	}

	//Squarespace Attribution Text Block//
	#block-yui_3_17_2_1_1644961177595_50221 {
      padding: 0.1875rem 0 0 0 !important;
      margin: 0 !important;
	}

	#block-yui_3_17_2_1_1644961177595_50221 p {
      font-size: 0.75rem !important;
      font-weight: 400 !important;
	}

	#block-yui_3_17_2_1_1644961177595_50221 a {
      font-weight: 700 !important;
	}

//MOBILE STYLES//
@media screen and (max-width:767px) {
  //Footer//
  	//Decrease Bottom Padding and Increase Side Margins//
  	footer.sections {
      section .content-wrapper {
        padding: 0 0 1.5rem 0 !important;
        margin: 0 10vw 0 10vw !important;
      }
  	}
  
  	//Company Name Text Block//
  		//Change Width//
  		#block-a313b4b5156e6ffd6767 {
          width: 50vw !important;
  		}
  
  		//Decrease Font Size//
		#block-a313b4b5156e6ffd6767 h4 {
          font-size: 1.125rem !important;
  		}
  
  	//Address and Contact Info. Text Block//
  		//Decrease Top Padding and Change Width//		
		#block-yui_3_17_2_1_1645223809885_12720 {
          padding: 0.5rem 0 0 0 !important;
          width: 50vw !important;
  		}
  
  		//Change Font Size//
		#block-yui_3_17_2_1_1645223809885_12720 p {
          font-size: 0.875rem !important;
		}

	//Social Media Icons Block//
		//Decrease Top Padding and Change Width//
  		#block-yui_3_17_2_1_1644900073520_11304 {
          padding: 0.375rem 0 0 0 !important;
          width: 50vw !important;
  		}
  	
  	//Logo Image Block//
		//Change Width//
  		#block-yui_3_17_2_1_1645144314791_120592 {
          width: 20vw !important;
  		}

	//Copyright Info. Text Block//
		//Decrease Top Padding//
  		#block-620c1f758d973d6e37c14f48 {
          padding: 1.5rem 0 0 0 !important;
		}

  		//Decrease Font Size//
		#block-620c1f758d973d6e37c14f48 p {
    	  font-size: 0.75rem !important;
		}

	//Squarespace Attribution Text Block//
  		//Decrease Top Padding//
  		#block-yui_3_17_2_1_1644961177595_50221 {
          padding: 0.125rem 0 0 0 !important;
		}

  		//Decrease Font Size//
		#block-yui_3_17_2_1_1644961177595_50221 p {
	      font-size: 0.625rem !important;
		}
}

Can someone please help me figure out where I’ve made a mistake? Thank you!

IMG_6807FCC55B71-1.jpeg

Edited by brendandelany
updated CSS to keep current
Link to comment
  • Replies 1
  • Views 452
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-620b2b4c0b17db5c830aba97 .span-12>.row .span-11 {
    width: 70% !important;
    float: left !important;
}
div#page-section-620b2b4c0b17db5c830aba97 .span-12>.row .span-1 {
    width: 30% !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.