# Add the CSS code

{% embed url="<https://youtu.be/Ytz7p4Kedws?t=221>" %}

## Copy the CSS Code

Simply copy this CSS code :

```css
/** 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

{% hint style="info" %}
**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
{% endhint %}

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 :tada:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://contact-22.gitbook.io/loops-footers/installation/add-the-css-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.