Issue with footer element staying in bar/container in mobile view

Support
#1

Not sure what I’m missing here. I’m using Theme.co email forms in my footer. When I switch to mobile view the columns are stacked but are going beyond the bar they are contained in and overlapping the page. I can’t figure out if it’s something I need to set in the inspector or if it requires CSS for breakpoints.
Any help would be greatly appreciated!

#2

Hello @KLWink,

Thanks for posting in!

Please be advised that the correct @media css code block should always look like this:

@media(min-width: 980px){
  element {
    //styling here
  }

  #element-class {
    //styling here
  }

  .element-class {
    //styling here
  }
}

Always make sure to close the curly braces to avoid any conflicts. By the way, the form is displaying beyond the bound of the footer because of your footer bar height. Please set the height to auto so that the footer will expand in smaller screens.

Hope this helps. Please let us know how it goes.

#3

Thanks for the quick reply! I made the height auto and it fixed how it looks in mobile but now when I’m in desktop view, my spacing is messed up. Before I had the sign up form fields with spacing between them and the submit button aligned correctly.
Any idea what I messed up?

#4

Hello @KLWink,

Add some margins for the input fields. You also need to adjust the top margin of the submit button.
It can only be done with custom css. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-subscribe-form input[type="text"],
.x-subscribe-form input[type="submit"] {
    margin-top: 0;
    margin-left: 5px;
    margin-right: 5px;
}

We would love to know if this has worked for you. Thank you.

#5

Didn’t seem to change anything:

#6

Hello @KLWink,

The code should at least work for the submit button. Please have it updated and use this:

.x-subscribe-form input[type="text"],
.x-subscribe-form input[type="email"],
.x-subscribe-form input[type="submit"] {
    margin-top: 0 !important;
    margin-left: 5px;
    margin-right: 5px;
}

I would highly recommend that you create a staging site where we can access or view it so that we can take a closer look. To know how to create a staging area, please check out these articles:


Best Regards.

#7

I am still building this website and doing so locally with MAMP. Also, I’m using Pro. Not sure if I should (or if it matters) use .x-subscibe-form or .tco-subscibe-form in the CSS?
I discovered I had an issue with custom CSS on the global settings (with the new CSS you gave me) and also had the old CSS on the footer element. I erased the CSS from the footer element. Now my issue is that the Email Form is vertical all the time- I originally had it horizontal for large screen viewing. Could you suggest what CSS I can use so that it will be displayed horizontal and then mobile respond to vertical?

#8

I found this on the support page: https://theme.co/apex/forum/t/horizontal-form/56347
I copied the suggested CSS and applied it and it’s good to go!

#9

Hey @KLWink,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.