Keep Mobile Footer Text and Image Next to Each Other

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!

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;
}
}