Loops Footers
Search
⌃K

Add the CSS code

Some of the header designs need a little bit of CSS. don't worry it's very simple

Copy the CSS Code

Simply copy this CSS code :
/** FOOTER **/
.gecko .et_pb_newsletter .et_pb_newsletter_field{
margin-bottom:0px;
}
.loops-menu-footer-anim-1 a{
position: relative;
}
.loops-menu-footer-anim-1 a:after{
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: -3px;
left: 0;
background-color: #564cff;
transform-origin: bottom right;
transition: transform 0.4s ease;
}
.loops-menu-footer-anim-1 a:hover:after{
transform: scaleX(1);
transform-origin: bottom left;
}
​
.loops-newsletter-button-1 .et_pb_newsletter_button_wrap{
position: absolute;
right: 0;
}
.loops-newsletter-button-1 .et_pb_newsletter_button{
height: 49px;
width: 49px;
}
.loops-newsletter-button-1 .et_pb_button:after{
left: 50% !important;
transform: translateX(-50%);
margin: auto !important;
}
.loops-newsletter-button-1 .et_pb_newsletter_button_text{
display:none;
}
​
@media (min-width: 767px) {
.loops-newsletter-inline-2 .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: 32.5% !important;
}
.loops-newsletter-inline-2 .et_pb_newsletter_form .et_pb_newsletter_field {
flex-basis: calc((100% - 34.5%) / 2) !important;
}
.loops-newsletter-inline-1 .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: 150px !important;
}
.loops-newsletter-inline-1 .et_pb_newsletter_form .et_pb_newsletter_field {
flex-basis: calc((100% - 155px)) !important;
}
}
@media only screen and (min-width: 980px) {
.loops-inline-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
float: left;
width: 50%;
margin-right: 4%;
margin-bottom: 0 !important;
}
.loops-inline-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
padding-left: 50%;
}
}
@media only screen and (max-width: 980px) {
.loops-inline-blog .entry-featured-image-url{
margin-bottom:10px;
}
.loops-inline-blog .column.size-1of2,.loops-inline-blog article{
margin:0 !important;
}
.loops-inline-blog .et_pb_image_container{
max-width: 150px;
}
.loops-inline-blog .entry-title{
padding-bottom:0px;
}
.loops-background-col{
background: none;
background-color: unset !important;
}
}
.loops-inline-blog article{
padding:0 !important;
}
.loops-inline-blog .et_pb_image_container{
margin:0 !important;
}
@media only screen and (max-width: 767px) {
.loops-inline-blog article{
text-align: center;
}
.loops-inline-blog .et_pb_image_container{
margin:auto !important;
}
}
.loops-contact-form-button-left .et_contact_bottom_container{
float:left;
}

Paste the CSS code

Good to know: If you already have a child theme installed, you can paste the CSS code directly into the style.css file of the child theme
Go to the back office of your site then in Divi >> Themes Options, at the bottom of the page you will find a "custom CSS" field, paste the code here.
That's it, I told you it's easy
🎉
​