Help with Mobile Footer Custom CSS

Hello, I was looking for answers to a few concerns on my mobile website. I have searched through the forum for the answers and found ways to fix other aspects, so I'm very appreciative of the Squarespace community. Any answers are greatly appreciated, thank you!

Site: werewoofbites.com

All of the following concerns are on the homepage of my site for mobile view only.

• I need to move the button to the bottom of the image (2nd child *seen in "WW screenshot 1") or remove from mobile view. I did mess with the padding to make it move downwards, however the button is too big and gets cut off. So I would need code to make the button smaller if it can move lower in the image. the button circled in red is what I would need moved to or around the purple box 
• The 6th child ("Spooky Ingredients" *seen in WW Screenshot 2" ) should be cropped just like the desktop version and I don't know how to achieve that on mobile.  I messed with the padding, but again it didn't work. The purple box is what I need removed from the image
• The footer in my mobile version on all pages is out of proportion and tall. I was looking for code to make it into a row (left - right column). I tried previous code from @tuanphan on another thread, but I couldn’t get it to work . I'm not necessarily worried about the background image, as I have code to fix it.

On 9/25/2021 at 9:59 AM, BriWau said:

Site URL: http://werewoofbites.com

Hello, I was looking for answers to a few concerns on my mobile website. I have searched through the forum for the answers and found ways to fix other aspects, so I'm very appreciative of the Squarespace community. Any answers are greatly appreciated, thank you!

Site: werewoofbites.com

Password: 1234

All of the following concerns are on the homepage of my site for mobile view only.

 

• I need to move the button to the bottom of the image (2nd child *seen in "WW screenshot 1") or remove from mobile view. I did mess with the padding to make it move downwards, however the button is too big and gets cut off. So I would need code to make the button smaller if it can move lower in the image. the button circled in red is what I would need moved to or around the purple box 
• The 6th child ("Spooky Ingredients" *seen in WW Screenshot 2" ) should be cropped just like the desktop version and I don't know how to achieve that on mobile.  I messed with the padding, but again it didn't work. The purple box is what I need removed from the image
• The footer in my mobile version on all pages is out of proportion and tall. I was looking for code to make it into a row (left - right column). I tried previous code from @tuanphan on another thread, but I couldn’t get it to work . I'm not necessarily worried about the background image, as I have code to fix it.

1st Point:

You can try the Design > Custom CSS with the following setting

@media only screen and (max-width: 768px) {
	#block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right {
		text-align: center;
	}
	#block-yui_3_17_2_1_1632274074310_17542 a {
		padding: 1em 1.404em;
	}
	[data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper {
		padding-bottom: 0 !important;
		padding-top: 25vmax !important;
	}
	section[data-section-id="614a87c7f80dc06b128e4478"] {
		height: 36vh !important;
	}
	section[data-section-id="614a87c7f80dc06b128e4478"] .section-background {
		bottom: unset;
	}
}

On 9/26/2021 at 3:31 AM, HoaLT said:

1st Point:

You can try the Design > Custom CSS with the following setting

@media only screen and (max-width: 768px) {
	#block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right {
		text-align: center;
	}
	#block-yui_3_17_2_1_1632274074310_17542 a {
		padding: 1em 1.404em;
	}
	[data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper {
		padding-bottom: 0 !important;
		padding-top: 25vmax !important;
	}
	section[data-section-id="614a87c7f80dc06b128e4478"] {
		height: 36vh !important;
	}
	section[data-section-id="614a87c7f80dc06b128e4478"] .section-background {
		bottom: unset;
	}
}

Thank you so much for your time and help!! It definitely did the trick 🙂

I still need help with the footer, if anyone can help.

• The footer in my mobile version on all pages is out of proportion and tall. I was looking for code to make the text (with links) into a row (left - right column). I tried previous code from @tuanphan on another thread, but I couldn’t get it to work . I'm not necessarily worried about the background image, as I have code to fix it.

On 9/28/2021 at 2:34 AM, BriWau said:

I still need help with the footer, if anyone can help.

 

• The footer in my mobile version on all pages is out of proportion and tall. I was looking for code to make the text (with links) into a row (left - right column). I tried previous code from @tuanphan on another thread, but I couldn’t get it to work . I'm not necessarily worried about the background image, as I have code to fix it.

You mean

About links on left, shop links on right on mobile?

7 hours ago, tuanphan said:

You mean

About links on left, shop links on right on mobile?

Thank you for responding! Yes, that's what I'm speaking about. is there anyway that you can help me with that?

By the way, thank you for answering people on this forum, it has helped me figure out a lot of code on my website!

On 9/29/2021 at 10:07 PM, BriWau said:

Thank you for responding! Yes, that's what I'm speaking about. is there anyway that you can help me with that?

By the way, thank you for answering people on this forum, it has helped me figure out a lot of code on my website!

Try adding to Design > Custom CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#page-section-61327de5de6fca3c925dac4c .span-6:first-child {
    display: flex;
}
div#block-65bf60229674cc25fad6 p:last-child {
    white-space: nowrap !important;
}
}

On 10/2/2021 at 3:58 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#page-section-61327de5de6fca3c925dac4c .span-6:first-child {
    display: flex;
}
div#block-65bf60229674cc25fad6 p:last-child {
    white-space: nowrap !important;
}
}

 

Thank you for your help!