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 🎉