Thank you for your attempt as fixing my issue Josue. Unfortunately it may have looked right on “browser mobile editor” but reality was not the case. The input and button were not side by side.

I think I failed to explain the problem properly so I will try again.

As I tried to explain before we want to use the ENFOLD Mailchimp Newsletter Sign Up Widget:

I had added the regular form to show you how we wanted it to look. Perhaps that was my mistake. I have rectified that and added my CSS to the Quick CSS.

Here are the problems I am running into in browser:

• When you squish the browser the button and text box go under the overflow and the text box overlaps on the words.
• We would like it to slip to the next line instead.

Obviously I know some of it is because I used positioning to force it to sit right. We want it to be one one line for browser but responsive enough that as you squish the browser it moves to the next line instead of disappearing in the overflow.

Below is my CSS:

/*Mailchimp Widget horizontal*/

.flex_column .widget .widgettitle, .content .widget .widgettitle {
    margin-top: 1.5em;
    width: 55%;
    font-size:1.8vh;
    float: left;
    clear: none;
}

#avia_mailchimp_widget-2 h3.widgettitle {
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size:1.8vh;
    top: 12px;

}

#top .av-mailchimp-widget p {
    margin: 2px;
    min-width:125px;
    float: left;
    width: 25%;
    clear: none;
 
}

#top .av-mailchimp-widget .button {
    position: relative;
    left: 20px;
    margin-top: 0;
    min-width: 125px;
    width: 25%;
    padding: 14px;
    float: right;
    clear: none;
}

#top .av-mailchimp-widget fieldset, #top .av-mailchimp-widget form {
    margin: 0;
    position: relative;
    float: left;
    left: 35%;
    bottom:14px;
}
@media screen and (min-width:320px) and (max-device-width: 480px) {
.flex_column .widget .widgettitle, .content .widget .widgettitle {
    margin-top: 0.85em;
    width: 100%;
    font-size:100%;
    float: left;
}
#top .av-mailchimp-widget fieldset, #top .av-mailchimp-widget form {
    margin: 0;
    position: relative;
    float: left;
    left: 0;
    bottom: 0;
	overflow-x: inherit !important
}
#top form {
    margin-bottom: 20px;
}
#top .av-mailchimp-widget p {
    margin: 2px 0;
}
#top .av-mailchimp-widget .button {
    position: relative;
    margin-top: 5px;
    width: 75%;
    bottom: 4px;
	overflow-x: inherit !important
}
}

/* Landscape */
@media screen and (max-device-width: 640px) and (orientation: landscape){
.flex_column .widget .widgettitle, .content .widget .widgettitle {
    margin-top: 0.85em;
    font-size: 2.0vm;   /* IE9 */
    font-size: 2.0vmin;
    line-height: 20px;
    width: 60%;
    float: left;
}
#top .av-mailchimp-widget fieldset, #top .av-mailchimp-widget form {
    margin: 0;
    position: relative;
    float: left;
    left: 0;
    bottom: 0;
}
#top form {
    margin-bottom: 20px;
}
#top .av-mailchimp-widget p {
    margin: 2px 0;
}
#top .av-mailchimp-widget .button {
    position: relative;
    margin-top: 5px;
    width: 75%;
    bottom: 4px;
}
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
.flex_column .widget .widgettitle, .content .widget .widgettitle {
    margin-top: 0.85em;
    width: 60%;
    float: left;
}
#top .av-mailchimp-widget fieldset, #top .av-mailchimp-widget form {
    margin: 0;
    position: relative;
    float: left;
    left: 0;
    bottom: 0;
}
#top form {
    margin-bottom: 20px;
}
#top .av-mailchimp-widget p {
    margin: 2px 0;
}
#top .av-mailchimp-widget .button {
    position: relative;
    margin-top: 5px;
    width: 75%;
    bottom: 4px;
}
}

/* Mailchimp Success */
.avia-form-success {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding: 0px 0px;
    line-height: 1.4em;
    border-radius: 2px;
    float:left;
}

Here you go