Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Klaviyo newsletter & pop-up fix
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 6 version
*/
.klaviyo-newsletter {
max-width: 205px;
}
@media all and (max-width: 749px) {
.klaviyo-newsletter {
margin: 0 auto;
}
}
.klaviyo-newsletter div[class*="StyledFormComponentWrapper"],
.klaviyo-newsletter form {
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.klaviyo-newsletter input[type="email"] {
display: inline-block !important;
width: auto !important;
height: 28px !important;
background: #ffffff !important;
border-radius: 2px !important;
margin-right: 5px !important;
padding-left: 10px !important;
border: 1px solid #ebebeb !important;
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
color: #000000 !important;
line-height: 26px !important;
letter-spacing: 0.8px !important;
}
.klaviyo-newsletter input[type="email"]::-webkit-input-placeholder {
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
color: #000000 !important;
line-height: 26px !important;
letter-spacing: 0.8px !important;
opacity: 0.75 !important;
}
.klaviyo-newsletter input[type="email"]::-moz-placeholder {
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
color: #000000 !important;
line-height: 26px !important;
letter-spacing: 0.8px !important;
opacity: 0.75 !important;
}
.klaviyo-newsletter input[type="email"]:-ms-input-placeholder {
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
color: #000000 !important;
line-height: 26px !important;
letter-spacing: 0.8px !important;
opacity: 0.75 !important;
}
.klaviyo-newsletter input[type="email"]::-ms-input-placeholder {
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
color: #000000 !important;
line-height: 26px !important;
letter-spacing: 0.8px !important;
opacity: 0.75 !important;
}
.klaviyo-newsletter input[type="email"]::placeholder {
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
color: #000000 !important;
line-height: 26px !important;
letter-spacing: 0.8px !important;
opacity: 0.75 !important;
}
.klaviyo-newsletter input[type="email"]:focus {
outline: -webkit-focus-ring-color auto 1px !important;
}
.klaviyo-newsletter button[class*="Button__FormStyledButton"] {
display: inline-block !important;
width: auto !important;
padding: 0 15px !important;
height: 28px !important;
line-height: 26px !important;
-webkit-appearance: button !important;
cursor: pointer !important;
background: #444444 !important;
border-color: #ebebeb !important;
border-radius: 2px !important;
border: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
color: #ffffff !important;
font-family: 'Lato', Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
font-weight: bold !important;
letter-spacing: 1px !important;
margin: 0 !important;
text-transform: uppercase !important;
max-width: 100% !important;
}
.klaviyo-newsletter .ql-editor * {
font-style: italic !important;
text-align: left !important;
color: #333333 !important;
font-family: 'Karla', Helvetica, Arial, sans-serif !important;
color: #000000 !important;
line-height: 1.6 !important;
font-size: 12px !important;
letter-spacing: 1px !important;
}
#klaviyo-bis-iframe .btn {
background: #444444;
border-color: #ebebeb;
border-radius: 2px;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: #ffffff;
display: inline-block;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
height: 45px;
letter-spacing: 1px;
line-height: 45px;
margin: 0;
padding: 0 25px;
text-transform: uppercase;
-webkit-transition: background-color 300ms ease-out;
-o-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
width: auto;
}
#klaviyo-bis-modal button[type="submit"],
#completed_message,
#email {
font-family: 'Lato', Helvetica, Arial, sans-serif;
}
#klaviyo-bis-modal button[type="submit"] {
text-transform: uppercase;
font-weight: normal;
}
body.klaviyo-bis-close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
body.klaviyo-bis-close #container {
margin-top: 0 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment