How to change padding/remove whitespace in Sela theme

That space is created by a few elements:

• the .front-page-content-area (which you don’t have any content inside it),
• the padding-top of the .front-widget-area,
• and margin-top of the images inside the .front-widget-area.

.

So we can just remove each of them:

• display:none for the .front-page-content-area because you don’t use it anyway,
• Set the padding-top of the .front-widget-area to 0,
• Set the margin-top of the images inside the .front-widget-area to 0.

.front-page-content-area {
    display: none;
}

.front-widget-area {
    padding-top: 0;
}

.front-widget-area img {
    margin-top: 0;
}

Here’s how it looks after applying those CSS: screenshot

THANKS!!! One more question if you don’t mind. How can I center the bottom footer mailing list sign up area? There are three widgets…I am only using one.

The site is built mobile-first. So our code needs to follow a similar route: mobile first.

.widget_yikes_easy_mc_widget .yikes-easy-mc-form {
    width: 100%;
}

.widget_yikes_easy_mc_widget {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 768px) {
    .widget_yikes_easy_mc_widget {
        width: 60%;
    }
}

The first block of code extend the form to 100% of the widget’s width. That way, we only need to control one width (just the widget’s width instead of both the widget’s width and the form’s width).

The second block of code centers the widget. It also set the widget’s width on mobile devices.

The third block of code set the widget’s width on desktops.

THANKS!!!!!

Hi – when I updated the Easy Forms for MailChimp by YIKES plugin tonight, it erased my css edits. How can I prevent this in the future?

Also, when I re-entered the CSS above for the form, it changed the width of the input fields, but they are still too large. How can I make them smaller? Sorry!

Lastly, regarding the mailing list popup that appears 8 seconds after you view the site…when we changed the Mailchimp form, it also seems to change that form on the pop-up. I have since changed the form id to use 1 on the footer mailing list sign up and ID 2 for the pop-up mailing list sign up. But on an iPad, it looks strange. On an iPhone 5, it looks fine. Any ideas why? Please see attached screenshots.

Thanks!!

iPhone: https://tinyurl.com/zro48q2

iPad: https://tinyurl.com/zq8vyru

I just marked this as unresolved.
Thanks!

Can’t figure this out…argh.

Hi – when I updated the Easy Forms for MailChimp by YIKES plugin tonight, it erased my css edits. How can I prevent this in the future?

If you’re already using WordPress’s official Jetpack plugin, then you should activate its Custom CSS module and add your styles in Appearance > Edit CSS.

If you don’t like using Jetpack, then you can install Simple Custom CSS plugin and add your styles in Appearance > Custom CSS.

Also, when I re-entered the CSS above for the form, it changed the width of the input fields, but they are still too large. How can I make them smaller? Sorry!

You mean the codes in the previous post? You can change the numbers as you see fit. I provided an explanation to each one right below the codes.

The width: 80% line is the width of the form on mobile devices. The width: 60% is the width on desktops. You probably want to reduce the 60% down to 40% or so.

Lastly, regarding the mailing list popup that appears 8 seconds after you view the site…

Your mailing popup isn’t working on my Google Chrome web browser. I’m on OS X El Capitan (version 10.11.3), using Google Chrome version 49.0.2623.75 (64-bit).

It works on the latest version of Firefox & Safari though. Haven’t tested on Edge and IE yet.

Lastly, regarding the mailing list popup that appears 8 seconds after you view the site…when we changed the Mailchimp form, it also seems to change that form on the pop-up. I have since changed the form id to use 1 on the footer mailing list sign up and ID 2 for the pop-up mailing list sign up. But on an iPad, it looks strange. On an iPhone 5, it looks fine. Any ideas why? Please see attached screenshots.

It’s because the width set at min-width: 768px of that is 20%. The code below switch that to 50%. The max-width line is optional; it indicates the maximum possible width that that form will extend to.

@media screen and (min-width: 768px) {
    .popmake.size-micro {
        width: 50%;
        max-width: 600px;
    }
}

Thanks! The above fixed the width issue on iPads. It also fixed the width issue on the form and pop-up. However, the bottom/footer form is not centered any longer. Sorry for the trouble. I think this should be the last issue.

And on iPhones, the bottom form is a bit small.

iPhone:
https://tinyurl.com/hq3ps82

iPad:
https://tinyurl.com/zvp7c79

That’s because you were messing with the wrong line of the codes that I’ve provided in an earlier post.

The width: 100% line should not be changed.
The width: 80% line controls the form width on mobile devices.
The width: 60% line controls teh form width on desktops.

On your current site, I see that the width:100% line has became width:40% for some reason.

Thanks.

I changed it to:

.widget_yikes_easy_mc_widget .yikes-easy-mc-form {
width: 100%;
}

.widget_yikes_easy_mc_widget {
width: 70%;
margin-left: auto;
margin-right: auto;
}

@media screen and (min-width: 768px) {
.popmake.size-micro {
width: 40%;
max-width: 400px;
}
}

And the pop-up and the footer form look good on tne iPhone 5s and Amazon Fire tablet and looks pretty good on an iPad mini. The pop-up is a hair small on the iPad mini and the footer form is a hair large on the iPad mini.

However, on the desktop, the pop-up looks perfect. The bottom footer is a good bit too large. Not sure if we can make it smaller? I have tried playing with the numbers on the 60% line as you can see above. Anything less than 40% and 400px doesn’t really affect the bottom footer, but does the pop-up.

So many variables…I might just have to live with it as is.

However, on the desktop, the pop-up looks perfect. The bottom footer is a good bit too large. Not sure if we can make it smaller?

Go back to this post. Why are you leaving out the third block of code? That third block controls teh form’s width on desktop. I’ve said that 3 times in this thread already; this the 4th time.

I am not leaving anything out. All blocks have always been in my code since you first told me to use that code.

In my post above this one…it pasted the blocks that are in my wp-content/plugins/yikes-inc-easy-mailchimp-extender/public/css/yikes-inc-easy-mailchimp-extender-public.min.css file.

I also copied that entire yikes-inc-easy-mailchimp-extender-public.min.css file into the Edit CSS form within the admin panel as well.

This is not in my style.css file as the mailing list form has its own css file.