New to the community? Start here

Hustle make CSS changes

Would like to apply CSS to the existing Email opt-in, so that the input boxes are stacked one after another.

That's Full Name and Email should be horizontally and the box size should be reduced.

Support access enabled.

Site: websiteURL/smartminds

Sohag
- Staff: Earn your WPMU DEV membership
- 75 pts: Hero points 291 pts: Rep. points LEVEL 5: The Incredible Code Injector
Hi Mark,

Hope you are having a beautiful day!

It seems the access token is expired. Can you please revoke access and then regrant support access again.

Please let us know when you do so.

Cheers,
Sohag
Mark
- WPMU DEV Initiate: Earn your WPMU DEV membership
- 179 pts: Hero points 20 pts: Rep. points LEVEL 1: WPMU DEV Initiate
I just did that, login and please provide a solutions asap.

Sohag

Staff: Earn your WPMU DEV membership

75 pts: Hero points 291 pts: Rep. points LEVEL 5: The Incredible Code Injector

Hi Mark,

Hope you are having a beautiful day!

Thanks for regranting the support access. Please add the following code in the "Custom CSS" for the optin to make the fullname and email fields to be one below another.

.wpoi-hustle .wpoi-optin form.wpoi-container{
    width: 90%;
}
.wpoi-hustle .wpoi-fields-joined.wpoi-col>.wpoi-element {
    margin-right: 0;
    margin-bottom: 1px;
    display: block;
    height: auto;
}
.wpoi-element.wpoi-grouped-element .wpoi-container {
    width: 100%;
    float: left;
    display: block;
}
.wpoi-element.wpoi-grouped-element .wpoi-container .wpoi-element.wpoi-grouped-element {
    width: 100% !important;
    border: 1px solid #2d2d2d;
    border-left: none;
    border-right: none;
    float: left;
    display: block;
    clear: right;
    overflow: hidden;
}

I have already added this. Please check if if works.

Please let us know if you need any further help.

Cheers,
Sohag

Mark
- WPMU DEV Initiate: Earn your WPMU DEV membership
- 179 pts: Hero points 20 pts: Rep. points LEVEL 1: WPMU DEV Initiate
Sohag,
I switched to First structure and I cannot see the changed you made, can you please have a look again into this? I want this to be happen when in first structure and also the box width should be reduced.
Sohag
- Staff: Earn your WPMU DEV membership
- 75 pts: Hero points 291 pts: Rep. points LEVEL 5: The Incredible Code Injector
Hi Mark,

Thanks for your quick reply.

I want this to be happen when in first structure and also the box width should be reduced.

I assume by box you mean the total optin box. Please correct me if I am wrong. I have added the following code for the first design in the "custom css".
```
a.inc-opt-close-btn {
    width: 50%;
}
.wpoi-hustle {
    width: 50%;
    margin: auto;
}
form.wpoi-container,
form.wpoi-container.wpoi-fields-joined.wpoi-no_icon {
    width: 100%;
    display: block;
}
form.wpoi-container .wpoi-element {
    border: 1px solid #2d2d2d;
    border-left: none;
    border-right: none;
    width: 100%;
    display: block;
    float: left;
}
```
Please make sure the cache is cleared and check if it works.

Please let us know if you need any further help.

Cheers,
Sohag
Mark
- WPMU DEV Initiate: Earn your WPMU DEV membership
- 179 pts: Hero points 20 pts: Rep. points LEVEL 1: WPMU DEV Initiate
Sohag,

I also want the width of the box to be reduced , no need to have that much wider box I need half of the size reduced and also aligned in center.
Sohag
- Staff: Earn your WPMU DEV membership
- 75 pts: Hero points 291 pts: Rep. points LEVEL 5: The Incredible Code Injector
Hi Mark,

Thanks for your quick reply.

For some reason the whole code was not saved earlier. I have created the code to make the optin box smaller. However I have added it again and it became smaller. Please check if this works.

Please let us know if you need any further help.

Thanks,
Sohag

Hustle make CSS changes

Join WPMU DEV to get everything you need
for WordPress, on unlimited sites, for one low price.

Plugins

Themes

Resources

Blog

WP Checkup free!

Everything you need for WordPress

Login

24/7 Unlimited Expert WordPress Support

Being a WPMU DEV member is like having your own WordPress support team - along with 350+ awesome plugins, themes and videos.

Join WPMU DEV to get everything you needfor WordPress, on unlimited sites, for one low price.

Welcome to the Community

Join our weekly newsletter and get the tips and resources all the WordPress pros use - for free!

How do you rate me?

Thank you for rating your experience!

100+ PREMIUM PLUGINS & THEMES FOR FREE?

Join WPMU DEV to get everything you need
for WordPress, on unlimited sites, for one low price.