Footer and Enfold MailChimp Newsletter Widget: Horizontal and Responsive

Good Morning! I hope you are well. The last I heard you needed a login to take a look two days ago. I sent that but I have not seen another reply so I thought I would *wave* and ask are you able to give me some advice or help on my issue.

Thanks for your time.

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;
}

Thank you Vinnie that is a little bit closer to what we are looking for.

We want the Widget title to sit on the same horizontal line as the input box and the button
Meaning it should be:
STAY UP TO DATE WITH SREA & INDUSTRY NEWS [Inputboxhere] [Subscribebuttonhere]

With proper spacing etc.

Then when you change the size of the browser on a desktop or a laptop the words and the input box as well as the submit button do not disappear and/or crowd over the widget title but instead move below the widget title like any normal responsive elements would.

Example
STAY UP TO DATE WITH SREA & INDUSTRY NEWS
[Inputboxhere] [Subscribebuttonhere]

Also the Input box and the Subscribe button should be the same height and width as each other. (Its ok to change height and width as part of the responsiveness but just needs to be consistently as both being the same height and width.)

We would like the mobile and tablet versions to look like the second example.

Ok I removed all the custom stuff I had added for the widget. However I left the part for customizing the widths for the three columns. Feel free to adjust that as needed.

/*Custom Footer*/
#footer .flex_column.av_one_third:nth-child(1) {
width: 20%;
}

#footer .flex_column.av_one_third:nth-child(2) {
width: 20%;
}

#footer .flex_column.av_one_third:nth-child(3) {
width: 48%;
position: relative;
}

here are the mock ups I was given originally
Here is an example of the horizontal subscription http://prntscr.com/b01c9r
Here is a scanned drawing of what the footer was to look like with the sub made horizontal. http://prntscr.com/b01cso

Please keep in mind the things I mentioned in my last post about squishing/resizing desktop/laptop browser screens as well as what I said about mobile too.

I have removed my custom CSS for the widget.

You have no idea how much I appreciate your patience and help in this. This footer has been the bane of my existence for entirely too long. :D

We are getting a lot closer.

Is there anyway to prevent this from happening when you squish the browser?

http://prntscr.com/b37ol1

Because that offset is also how it looks on tablets.

Is there a way to hide the * in Email Address label?

Thanks again.

Fantastic Vinay. I apologize for not getting back sooner but I have been busy.

So ideally we do not want the Email Address Label at all. But getting rid of the label seems to cause the input box to slide up and if I put the title as the label when you squish the browser the input box goes down (because STAY UP TO DATE WITH SREA & INDUSTRY NEWS is so long) but the button stays in place.

Using the label as the title http://prntscr.com/b7lk0z
Taking the label out all together and using the widget title: http://prntscr.com/b7lkyk

Any suggestions for that?

Thank you again Vinay for all your help we ended up moving it to above the actual footer on some pages instead. LOL and I used the Mailchimp for WordPress Plugin and a tutorial from here to make that form. :D

Thanks again for all your help.