Text align Footer Text Widgets

Support
#1

Hi Guys,

I have two text widgets in the footer of my site. Can I ask could you to advise me how to text align Widget 1 to the left, and text align Widget 2 to the right?

Also, how would i change the text colour of Widget 2 to Hex Value: #30c7d1

Thanks a million for you help in advance!

#2

Hi There,

Thanks for writing in! You can switch to Text mode of your Text Widget and use inline CSS on your elements.

<p style="text-align:left;">My Widget Content 1</p>
<p style="text-align:left;">My Widget 1 second line</p>

<p style="text-align:right;color:#30c7d1">My Widget Content 2</p>

Also refer secure note.

Hope that helps.

#3

That’s great, it worked perfectly, thank you so much!

And sorry, one last question, how would I change the font to Roboto?

#4

Hi @billy.rooney

That’s the CSS style property you need to add to your code:
font-family: "Roboto",sans-serif;

So, your <p> tag is like this:

<p style="text-align:right;color:#30c7d1;font-family: "Roboto",sans-serif;">My Widget Content 2</p>

To learn more about font-family property, please check this guide:

https://www.w3schools.com/cssref/pr_font_font-family.asp

Thanks.

#5

Thank you so much, I really appreciate that.

Sorry, last question I promise. Is there anyway to change the layout of Widget 2 in mobile mode? I have a break space in there so it sits level with the lower line of text in Widget 1 in Desktop view.

Is there a way of removing that break space and centering the text in the widget in mobile view?

Thanks again so much for all of your help!

#6

Hello @billy.rooney,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    footer.x-colophon.top .x-column.last .widget {
    margin-top: 0;
    display: flex;
    justify-content: center;
}

footer.x-colophon.top .x-column.last .widget p {
    margin-bottom: 10px;
}

footer.x-colophon.top .x-column.last .widget p:first-child { 
    display: none;
}
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#7

Hi,

Thank you so much for that. I changed the CSS a little so it justifies left in mobile view, although I’m having a little trouble doing it for tablet view and smaller. I changed the max width bit to 700px, but it doesn’t seem to be working. Basically I would like the text in the two widgets to justify left on Tablet and mobile. Any ideas?

And thank you so much!

#8

Hi @billy.rooney,

Please change the above CSS to this,


    @media only screen and (max-width: 767px) {
    footer.x-colophon.top .x-column.last .widget {
    margin-top: 0;
    display: flex;
    justify-content: center;
}

footer.x-colophon.top .x-column.last .widget p {
    margin-bottom: 10px;
    text-align: center !important;
}

footer.x-colophon.top .x-column.last .widget p:first-child { 
    display: none;
}
footer.x-colophon.top .x-column .widget p {
    text-align: center !important;
}
}

That should align it :slight_smile:

Thanks!

#9

That’s great, thank you so much.

And sorry to plague you with questions, just wondering is it possible to have an image sit over text in the same widget, with the appropriate padding in place (like the attached) ? Also, how would I change the font size? Thanks again?

#10

Hi again,

To show an image over the text just add the following code above your text in the same widget:

<img src="your-image.png" style="height: 50px; margin-bottom: 20px;" alt="Healthy Skin by Better Design">

Just change the image URL in the src attribute.

To change the font size, you can add the following code in the Theme Options > CSS:

.custom-font-size {
    font-size: 18px;
}

Then assign custom-font-size class to your text in the widget, for example:

<p class="custom-font-size" style="text-align: left;">some footer text</p>

Hope this helps!

#11

That is so helpful, thank you so much.

One more tiny question and I’ll leave you alone, I’m trying to have the below text be a mailto; href, but I can’t seem to get it quite right:

info@ostoform.com

Would you know now I would manipulate the above code so the mailto function works?

#12

Hi,

You can try this

<a href="mailto:info@ostoform.com">info@ostoform.com</a>

For more information kindly refer to the link below

Thanks

#13

Hiya,

I appreciate your help there. Sorry a bit of text that I pasted in didn’t going into my response. Basically I’m looking to style that HREF. Does the following code sit outside of the HREF, or inside it:

#14

Hi @billy.rooney,

I’m a bit confused, that text is a title that has no wrapping links, hence no HREF. Would you mind providing more clarification?

Thanks.

#15

Hi Rad,

I’m sorry, this is down to me poorly explaining the issue, my apologies.

So, I have two text widgets in the footer. The second widget (on the right) has three lines of text in it. For the third line of text (info@ostoform.com), I have the below styling:

info@ostoform.com

So, basically I want to keep the format (the text colour), and have the ‘info@ostoform.com’ as a Mail To link that opens the users default email application, with a hover state of white. Does that make sense?

#16

Hi there,

Thanks for making it clear.

To do that, please go to Appearance > Widgets then edit the Text widget under Footer 2.

Edit it it in Text mode and update these lines:

<p class="custom-font-size" style="text-align: left; color: #30c7d1;">info@ostoform.com</p>

to

<p class="custom-font-size" style="text-align: left;"><a class="footer-email" href="mailto:info@ostoform.com">info@ostoform.com</a></p>

Then add this code in the Global CSS:

.custom-font-size .footer-email {
    color: #30c7d1 !important;
}

.custom-font-size .footer-email:hover {
    color: #fff !important;
}

Hope this helps.

#17

Hi Jade,

Thank you so much, that is really really helpful, and worked a treat!

You guys are the best ! :grinning:

#18

You are most welcome. :slight_smile:

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.