Footer social widget vertical align

Shapely
1

Hi there
Can I pls get guidance on how to make the shapely social widget vertical align to align to top. Default aligns to middle.
Thank you

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

In order to check your question i need to see your live website, please provide url and i will take a look

3

Thank you.

It’s xtraveler.co

Password: pizza

4

Hey there

Ok, I see them in the footer and they are placed horizontally, how do you want to have them? looks like I need some more info :slight_smile:

5

Hi Noda

As you can see there’s a large gap between Reach out (email) and the Social Links. That’s because the Social Links widget is a sqaure box which is aligned to Middle vertically. How can I align to Top instead?

Thanks,
John

6

hey there

Ok, got it
Please add this CSS in appearance - customize - additional CSS

section.shapely-social-links.text-left {
padding-top: 0px;
}
div#text-26 {
margin-bottom: 0px !important;
}

Thanks!
Colorlib Support Team

7

Thanks so much, that worked perfectly!

Can I pls ask you one more favour? In the same footer area, from th 3rd column (starting with heading “Join the X List”), for some reason all the fonts have become smaller. It’s like there’s a code above it that says ‘make all the donts below one size smaller’ - note there are different font sizes in different sections, but all together they are all like 1 or 2 times smaller font?

8

Hey there

Sorry, but the question is not quite clear, usually, I don’t need to know how they were before, I just need to know what is your current goal, what and where you want to change and how :slight_smile:

this is the code to change footer text font size:

footer.bg-dark p,
footer.bg-dark span,
footer.bg-dark li {
font-size: 17px;
}

9

Hi, sorry for the late reply.

What I meant was, you’ll see the footer has 4 columns, and the template for each column is HEADER + BODY.

You’ll notice that the size of the header and body fonts in the 4th column are different to the first 3 columns. I want them all the same for consistency. The first column can act as the guide for the sizes I want.

Hope this makes sense.

Thanks,
John

10

HI John

there is no 4th column at all in the footer, check this: Screenshot by Lightshot

11

Hi Noda

The second “column” is empty.
The 4 are:

  • About
  • (empty)
  • Join X list
  • Reach out

Thanks,
John

12

Hi John

Thank you for clarification, try this CSS please:

.textwidget p {
    font-size: 15px;
}
13

Thank you I think that worked!

14

Hi, there
I will close this case now, Feel free to contact us again if you have other questions
Thanks!