Jump to content

Newsletter Block Not Displaying Correctly on Mobile

Recommended Posts

Posted

Hi there! 

I'm building a website and I keep running into some issues with the newsletter form block. (https://www.qwerrybrands.com/contact)

Does anybody know why the newsletter block is not displaying properly on mobile? I'm building in Fluid Engine and the mobile preview is showing me the correct spacing/formatting, but on my actual phone, the button and footnote are overlapping for some reason. (I'll attach screenshots). Any idea what's happening/how to fix this?

Thanks so much,

Nicole

Mobile Preview.png

ActualMobileDisplay.PNG

  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

With overlay, you can use code I sent, it should work for all newsletter

/* Mobile newsletter */
@media screen and (max-width:767px) {
.newsletter-form-body {
    margin-bottom: 3.5rem !important;
}
}

With input overflow the box, you try edit page > Adjust Newsletter width on mobile (reduce width)

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!)

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.