Support » Developing with WordPress » Messy and compressed footer

  • Resolved miguelitolaparra

    (@miguelitolaparra)


    Hi.
    For a few days I have noticed that the footer of my website.
    it’s messy, as you can see in the image.
    I have searched and tried things to fix it, to no avail. The author can do little, since my support has long expired and it is not appropriate to renew the support for this query, that’s why I go here.
    I have already looked for solutions online, but without showing the problem it is difficult. The content of the footer is very compressed in the center of the page and one of the columns extends downwards.
    The footer Widgets are TEXT, I have created it with three columns, and I show you the code used. I’m sure the error is simple, but I can’t find it.

    Thank you very much.

    <div class="col-md-6 col-lg-4">
    <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>
    
    <div class="col-md-6 col-lg-4">
    	<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>
    
    <div class="col-md-12 col-lg-4">
    <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>
    </div> 

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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 ]

    Thread Starter miguelitolaparra

    (@miguelitolaparra)

    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:

    Thread Starter miguelitolaparra

    (@miguelitolaparra)

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.