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).
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:agricolaparra@gmail.com">agricolaparra@gmail.com</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:
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!
