How to perfectly fit a background image fully
-
Hi,
Just wondering how to do the following.
We have a Gift-card design (in illustrator, so we can change the sizes) and like to use that as the background of the popup box. You have the option to add a background, but as our gift card has a particular design I need it to fit perfect. Just wondering:
1. Can I easily change the pop-up box size to fit the gift card dimensions? If so how? (preferred) If this is not possible what size does my gift card need to be in pixels to fit precisely in the popup box?
2. How can I get rid of the top header (text and background) so I can see the gift card background image fully?
3. How do I change the size of the texts [ I agree with the term and condition
& We will never spam you, unsubscribe anytime.]
4. How do I change the hyperlink colors of [term and condition]
5. And how can I make these a bold/strong letter type?Thanks
-
Hi,
All your requests are not available with options. However they can be solved by custom CSS.
#1: We do not have info about your gift card dimensions, how can we help?
#2: You can go to Design tab > Header, then change the Header color and background color there.For the rest, you can add this custom CSS. Please go to Design tab > Custom CSS:
<span style="font-size:20px; font-weight:bold;">I agree with the <a href="" style="color:red">term and condition</a></span>Best regards.
Hello,
The problem with this plugin with its current status is adjusting it for responsive use and different scenarios.– You may try to use (display:none) for the header.
– Try to use background that fits the popup size you decide in the following CSS code.
– Don’t include graphical text or titles in this background image cause it might differ from device to another.
—-
Try similar CSS in the plugin custom CSS:
—-
Adjust the min-height / height and same for width for your needs.wcb-coupon-box .wcb-md-content .wcb-modal-body .wcb-coupon-message {
text-align: left;
position: relative;
padding: 50px 0px 0px;
}
.wcb-coupon-box .wcb-md-content .wcb-modal-body {
position: relative;
padding: 0 2% 0 2%;
}
.wcb-md-modal {
max-width: 720px !important;
min-width: 320px !important;
min-height: 390px;
}
.wcb-coupon-box .wcb-modal-body {
padding: 40px;
min-height: 340px !important;
}
.wcb-coupon-box .wcb-content-wrap .wcb-md-content .wcb-gdpr-field a { color:#fff; }
.wcb-coupon-box .wcb-modal-body .wcb-coupon-box-newsletter .wcb-newsletter-form input {
border-radius: 50px;
}
.wcb-coupon-box .wcb-content-wrap .wcb-modal-body .wcb-guide, .wcb-coupon-box .wcb-content-wrap .wcb-modal-body .wcb-text-follow-us, .wcb-coupon-box .wcb-content-wrap .wcb-md-content .wcb-gdpr-field, .wcb-coupon-box .wcb-content-wrap .wcb-md-content .wcb-warning-message, .wcb-coupon-box .wcb-content-wrap .wcb-md-content .wcb-modal-body .wcb-coupon-message, .wcb-coupon-box .wcb-modal-header {
text-align: left !important;
}
.wcb-coupon-box .wcb-footer-text-after-subscribe, .wcb-coupon-box .wcb-footer-text, .wcb-coupon-box .wcb-guide {
text-align: left;
}
.wcb-coupon-box .wcb-md-content .wcb-modal-header {
display:none;
}#vi-md_wcb .wcb-md-content div.wcb-modal-body {
padding: 30px;
}
.wcb-coupon-box .wcb-content-wrap .wcb-md-content .wcb-modal-body .wcb-coupon-box-newsletter {
width: auto !important;
margin: 0 auto;
}
@media screen and (max-width: 640px) {
#vi-md_wcb.wcb-coupon-box .wcb-content-wrap {
padding: 30px;
}
}
@media screen and (min-width: 1024px) {
#vi-md_wcb .wcb-md-content div.wcb-modal-body {
padding: 30px 30px 30px 30px !important;
}
}
- The topic ‘How to perfectly fit a background image fully’ is closed to new replies.
