Fixing Coding Issue in Footer

KYavela
Participant

Hello all!

 

I recently designed and published our company website in HubSpot CMS, and have had several problems with the footer. Because I used a free HubSpot template/theme, I am unable to customize certain features of it without coding, one of which happens to be the footer. As I have no coding experience, I had a few coders help me out, but it's still not designed the way it needs to be.

 

To summarize, our website pages and landing pages footer has our 3 office locations - each includes the address and phone number. For whatever reason, the addresses and numbers never aligned horizontally and directly underneath each location; due to this, I kept spacing out each line until everything looked aligned. Although the result was the desktop version looking aligned, the mobile version ended up being (and still is) compeltely scattered. 

 

When I turned to help from a coder, the change they made was making that alignment on our website page footer, but only when one hovers over the location; see attached screenshot. If you visit this website page of ours, under the Contact Information Maps, the way those locations are laid out is what I would like for our website footer. 

 

https://www.cwtechnology.com/contact-us

 

A similar issue is on our landing pages footer. It currently looks aligned on the desktop version, but the mobile version is completely scattered; I had to do odd spacing in the editing mode to align the footer the way I wanted it to, but still needs to be fixed on both desktop and mobile versions I think.

 

To give you a better idea, I have attached the following screenshots:

  • Screenshot of the current website footer (hover).
  • Screenshot of the current landing page footer (desktop version).
  • Screenshot of the current landing page footer (mobile version).
  • Screenshot of the current landing page footer (desktop version - edit mode).
  • Screenshot of the current landing page footer (mobile version - edit mode).

 

Thank you, and I look forward to hearing from you soon!

 

Sincerely,

Katya

  • Website Footer - HoverWebsite Footer - HoverLP Footer - Desktop Version - Edit ModeLP Footer - Desktop Version - Edit ModeLP Footer - Desktop VersionLP Footer - Desktop VersionLP Footer - Mobile VersionLP Footer - Mobile VersionLP Footer - Mobile Version - Edit ModeLP Footer - Mobile Version - Edit Mode
0 Upvotes
5 Replies 5
sharonlicari
Community Manager

Hey @KYavela 

 

Thank you for all the information provided. I'll bring to this conversation a few experts that might be able to help you. 

 

Hey @stefen @Theodor @iliascarre what would you recommend in this case?

 

Thanks

Sharon 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
webdew
Top Contributor | Diamond Partner

Hi @KYavela ,

This is Media Query related. Please add the code to your CSS file. 




<!-- Code Start -->

 

@media only screen and (max-width: 852px) 

{

 

  .footer__navigation 

  {

    width: 100% !important;

    text-align: center;

}

 

.footer--site-page .footer__form {

    

    width: 100% !important;

}

 

.footer__row {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    justify-content: center !important;

}

.footer .hs-menu-wrapper ul {

    list-style: none;

    margin: .5rem 0 2rem;

    padding-left: 0;

    display: inline !important;

    justify-content: center !important;

}

 

.footer--site-page .footer__form 

{

        width: 70% !important;

    text-align: center !important;

}

 

.social-links

 {

    align-items: center;

    display: flex;

    flex-wrap: wrap;

    justify-content: center !important;

  }

 

}



<!-- End -->

Mobile Code:

@media only screen and (max-width: 481px) 

{

 

.footer__container {

    margin: 0 auto;

    padding: 60px 20px !important;

}

 

.footer .hs-menu-wrapper ul 

{

    

    margin: 0 !important;

     

}



.footer .hs-menu-item a {

    

    font-size: 16px !important;

    

}




}


Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

KYavela
Participant

Hello @webdew ,

 

Thank you for your reply and solution! This might be a silly question, but where do I find the CSS file in my website CMS on HubSpot? Also, I noticed you split up the codes, mentioning one is the Mobile Code. Is the first code for the desktop version only then? 

0 Upvotes
webdew
Top Contributor | Diamond Partner

Hi @KYavela ,

The first code is for tabs. We have added required ccs for the tabs responsive and the second code is for mobile versions.To find the CSS file please follow these points :-- Open the you webpage or landing page:

- Check  this video
https://www.loom.com/share/a08d523902cc42c39b43225abe498fc2

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

KYavela
Participant

Hello @webdew ,

 

Thank you for your video - it was very helpful! I was able to follow through each step, but I hit one road block, so just one last question for you:

 

In you video, once you have copied and pasted the code into the file, you go back to the lines titled "Mobile Code," "End," and "Code Start," and somehow change them to be italized and blue (attached screenshot). What is it that you are doing here? How did you make that change?

 

 Screenshot 2021-04-16 132306.png

 

 

0 Upvotes