Messy and compressed footer

Hey Miguel,

Have a look at your Bootstrap div classes. You are further dividing up your main columns into smaller columns which is compressing the content.

For example, you have .col-md-6 .col-lg-4 on the Additional menu column but you further divide that inside by using .col-md-6 .col-sm-6 .col-xs-6. What this does on large screens is take a 1/3 width column (.col-lg-4) and divide it in half again (.col-md-4).

[ Signature moderated ]

• This reply was modified 4 years, 2 months ago by Steven Stern (sterndata).

Thanks for your quick reply @majaid

I understand what you mean, but not exactly how to fix it.
I don’t want to make any more mistakes since my CSS experience is scarce.
Can you give me an idea how to correct this?
Maybe I should delete that DIV, or change the DIV data?
I will look for a solution on the Internet with an idea that you have given me
Thank you

Hello @miguelitolaparra,

Please use the following code:

<div class="footer__item">
	<img src="#" alt="logo-footer" >
	<p class="footer__copy">
	?AGRICOLAPARRA   ? 2020<br />
	Sitio creado por   
	<a href="https://webapplicationdeveloper.es" target="_blank">WAD</a></p>
	<p>Este sitio esta en fase de  producción</p>
</div>

<div class="footer__item">
	<h3 class="footer__title">Menu Adicional</h3>
<div class="row">
	<div class="col-md-6 col-sm-6 col-xs-6">
		<ul class="footer__menu">
			<li><a href="https://agricolaparra.com">Home</a></li>
			<li><a href="https://agricolaparra.com/blog/" target="_blank">Blog</a></li>
			<li><a href="https://agricolaparra.com/contacto/" target="_blank">Contacto</a></li>
			<li><a href="https://agricolaparra.com/galeria/">Galeria</a></li>
		</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
	<ul class="footer__menu">
		<li><a href="https://agricolaparra.com/servicios/">Servicios</a></li>
		<li><a href=" https://agricolaparra.com/politica-de-cookies/" target="_blank">Cookies</a></li>
		<li><a href="https://agricolaparra.com/politica-de-privacidad/" target=_blank">Privacidad</a></li>
		<li><a href="https://agricolaparra.com/aviso-legal/" target=_blank">Aviso Legal</a></li>
	</ul>
</div>
</div>
</div>

<div class="footer__item">
	<h3 class="footer__title">Contacto</h3>
	<div class="company-contacts">
		<address>
		<p>
		<i class="fontello-location"></i>
		Miguel A. Espeso Alvarez </br>
		Plaza del Pueblo, 10 
		</br>
		05400 La Parra (Avila)
		</p>
		<p>
		<i class="fontello-phone-call"></i>
		<a href="tel:637486853"> 637 48 68 53</a>
		</p>
		<p>
		<i class="fontello-mail"></i>
		<a href="mailto:[email protected]">[email protected]</a>
		</p>
	</address>
		<div class="social-btns">
			<div class="social-btns__inner">
				<a class="fontello-twitter" href="#" target="_blank"></a>
				<a class="fontello-facebook" href="#" target="_blank"></a>
				<a class="fontello-linkedin-squared" href="#" target="_blank"></a>
				<a class="fontello-youtube" href="#" target="_blank"></a>
				<a class="fontello-gplus" href="#" target="_blank"></a>
				<a class="fontello-vimeo" href="#" target="_blank"></a>
				<a class="fontello-vkontakte" href="#" target="_blank"></a>
				<a class="fontello-instagram" href="#" target="_blank"></a>
			</div>
		</div>
	</div>
</div>

As @majaid mentioned, there is no need to use columns divs before the footer-item divs, as the theme appears to create the three columns already.

As you’ve added <div class="col-md-6 col-lg-4">, <div class="col-md-6 col-lg-4">, and <div class="col-md-12 col-lg-4"> before each footer item, they are reduced in size into even smaller columns within the three columns.

If you remove the <div class="col-md-6 col-lg-4">, <div class="col-md-6 col-lg-4">, and <div class="col-md-12 col-lg-4">, which I did in the code above, your footer should look like this:

You can learn about Bootstrap columns at the following resources:

• https://getbootstrap.com/docs/4.0/layout/grid/
• https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Thanks for your quick reply @nm1com

Your code has worked.

My partner is not here and I do not understand CSS.

Now I will look for something to read a little about it, but I find it a bit difficult.
The client noticed that his site was weird in the footer, and I did not know how to fix it, and my partner will be away for several days.
I tried adding custom HTML widgets, with phone prompts from my partner, but unfortunately in WordPress I am also somewhat new and get stuck.

Thanks for your help.

You’re welcome! I’m sure you’ll be able to learn it. It’s a bit difficult at first. After some time, you’ll get used to it. Good luck!