Styling the Email Form (Responsive)

[werner7]

Hi Support,

I am a little stuck. I need to style the Email From to look like this:

But be responsive so that the text box goes smaller based on the collumn width for smaller displays/mobiles etc.
I tried to use a % in max width but it just messes it up…

See my design so far - http://hosting.quentosity.co.nz/~rentlinkco/
Entry pass is entry101

This is the css I applied to it so far:

.tco-subscribe-form{
  text-align:center;
  width:100% !important;
  max-width: 100% !important;
}

.tco-subscribe-form fieldset{
  display: inline !important;

}

.tco-subscribe-form fieldset input[type="email"] {
	margin:0 !important;
  width:35em !important;
  height:4.3em;
  max-width:100%;
}

.tco-subscribe-form fieldset input[type="submit"] {
  margin-left:-2em; 
  width:7em;
  box-shadow:none;
    height:4.3em;

}

[ruenel]

Hello @werner7,

Thanks for posting in! The width in code is using em which is way wider. Please reduce it to narrower with or simply use pixels instead. You may update the code and use this:

.tco-subscribe-form{
  text-align:center;
  width:100% !important;
  max-width: 100% !important;
}

.tco-subscribe-form fieldset{
  display: inline !important;

}

.tco-subscribe-form fieldset input[type="email"] {
	margin:0 !important;
  width:350px !important;
  height:4.3em;
  max-width:100%;
}

.tco-subscribe-form fieldset input[type="submit"] {
  margin-left:0; 
  width:120px;
  box-shadow:none;
    height:4.3em;

}

Hope this helps.

[werner7]

Hi @RueNel,

Thank you for the response.

I use EM as I use stepped font sizes, this way it’s more ‘mobile responsive’ so to speak.

However, even with pixels I have the same problem. I would like it to be 35em which translates to 490px.

However, if the footer column does go smaller that it cannot accommodate 490px, I would like to set a max width of 80% or similar.

I just can’t seem to get that applied. Any help would be appreciated.

[ruenel]

Hello @Werner7,

To have a different width in smaller screens, please add this code as well:

@media(max-width: 767px){
  .tco-subscribe-form fieldset input[type="email"] {
    width: 260px !important;
  }

  .tco-subscribe-form fieldset input[type="submit"] {
    width: 120px !important;
    margin-left: 0;
  }
}

We would loved to know if this has work for you. Thank you.

[werner7]

@RueNel

@media(max-width: 767px){
.tco-subscribe-form fieldset input[type=“email”] {
width: 260px !important;
}

.tco-subscribe-form fieldset input[type=“submit”] {
width: 120px !important;
margin-left: 0;
}
}

Thank you. That worked. Modified it a little but works a charm!

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.