Docs

[Chris Stovall]

I’m using a combination of the accordion and custom headlines on this site.

http://162.144.201.72/~roarla/

I really need to get the fonts to looks the same and have the same spacing at all device sizes.

What do I need to do to get the fonts to match?

Thanks!

[Rupok]

Hi there,

It seems you have set Helvetica font for everything and font-size and spacing are usual. Would you clarify where you want to match this? DO you want the Accordion Heading and Text as same? It won’t be usual but let us know what you are trying to accomplish so that we can help.

Cheers!

[Chris Stovall]

I would like the accordion header to match the custom header as below.

http://i.imgur.com/O80nmPk.png

I can’t get the code correct to get the fonts to be the same size.

[Nico]

Hi There,

In this case, to check your setup further, would you mind sharing us your admin credentials.

Don’t forget to set it as private reply.

Thanks.

[Chris Stovall]

This reply has been marked as private.

[Rupok]

Hi there,

Let’s add this CSS under Custom > CSS in the Customizer.

h5.extra-space {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 114.2% !important;
  margin-bottom: -6px;
  margin-top: 45px;
}

And make sure to remove this :

.extra-space {
  margin-bottom: 35px;
}

Hope this helps.

[Chris Stovall]

So the font size is great! Thank you for that.

What can we do about getting the spacing right on all of the screen sizes?

[Joao]

Hi There,

Can you clarify what you are referring to?

Thanks

Joao

[Chris Stovall]

When you resize the screen, the tops of the columns to not line up per the screen shot above. Or you can just look at the site.

[Thai]

Hi There,

Please add the following CSS:

@media (min-width: 768px) and (max-width: 1100px){
    #x-section-1 > div > div:nth-child(2) > h5:nth-child(2) {
        margin-top: 18px !important;
    }
}

Hope it helps 🙂

[Chris Stovall]

This worked great, but there are still a few screen sizes that are not lining up correctly. Same issue, just different screen sizes.

Thanks!
CDS

[Rue Nel]

Hello There,

Thanks for providing the screenshots. You might need to update the code and make use of this instead:

@media (min-width: 768px) and (max-width: 850px){
    #x-section-1 > div > div:nth-child(2) > h5:nth-child(2) {
        margin-top: 18px !important;
    }
}

@media (min-width: 851px) and (max-width: 1100px){
    #x-section-1 > div > div:nth-child(2) > h5:nth-child(2) {
        margin-top: 24px !important;
    }
}

Hope this helps.

[Author]

Posts