[BenjaminParticipant]

Hey there,

I have been trying to achieve this look http://screencast.com/t/DJOSjZmrlOB8 but have not been successful, can you please assist?

[BenjaminParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! To have the same in your example, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon.top .x-column.x-1-1 .widget {
  display: inline-block;
   width: auto;
}

.x-colophon.top .x-column.x-1-1 #text-5 {
    max-width: 65px;
    margin-right: 20px;
}

.x-colophon.top .x-column.x-1-1 #menu-footer,
.x-colophon.top .x-column.x-1-1 #menu-footer li {
        border: none;
}

.x-colophon.top .x-column.x-1-1 #menu-footer li {
    display: inline-block;
    margin: 0 10px;

}

Please let us know how it goes.

[BenjaminParticipant]

Thank you Rue,

It works perfectly – can I also ask how to adjust the height of colophon.top to make it smaller?

Regards
Benjamin

[ThaiModerator]

Hi Benjamin,

Please update the previous CSS a bit:

.x-colophon.top {
	padding: 15px 0;
}
.x-colophon.top .x-column.x-1-1 .widget {
	display: inline-block;
	width: auto;
	margin-top: 0;
}

.x-colophon.top .x-column.x-1-1 #text-5 {
    max-width: 65px;
    margin-right: 20px;
}

.x-colophon.top .x-column.x-1-1 #menu-footer,
.x-colophon.top .x-column.x-1-1 #menu-footer li {
    border: none;
}

.x-colophon.top .x-column.x-1-1 #menu-footer li {
    display: inline-block;
    margin: 0 10px;
}

Hope it helps 🙂

[BenjaminParticipant]

You guys are awesome – I truly feel blessed that this is a place to go when you are stuck.

Thanks once again!

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[BenjaminParticipant]

Hey again,

I received a new request and if possible could you please advise me how to best proceed.

Right now the footer widget area is set to one and the corresponding CSS applies to that. I would like to add Facebook and Youtube icons to the right side of the links and have them aligned to right as well.

Is it best to go with a footer widget area set to two or keep it to one?
Also how would the updated CSS be applied?

Thanks in advance
Benjamin

[RupokMember]

Hi Benjamin,

You can use this widget to place the icons. Let’s place them within a div and give it a class name. Then float it right with float: right; CSS.

Hope this makes sense.

Cheers!

[BenjaminParticipant]

Thank you – can you please help me with this? I’m having difficulties to make it work the way I want.

[BenjaminParticipant]

Just to clarify – I have added another text widget in footer 1 and added the following:

<div class="footer-social">
[container style="font-size: 40px"]<a href="#" target"_blank">[icon type="facebook-square"]</a> <a href="#" target="_blank">[icon type="youtube-square"]</a> [/container]
</div>

The icons are being left centered and “breaking” the height. I have tried various CSS outputs but been unable to target the class so the look stays see same.

What I’m doing wrong?

[FriechModerator]

Hi There,

I’ve just updated your code and added the custom CSS below on your customizer

#text-8 {float: right;font-size: 2em;}

Hope it helps, Cheers!

[BenjaminParticipant]

Wow, thanks a ton. Perfect! Any guesses what I did wrong?

[FriechModerator]

You’re welcome Benjamin,

The <div class="footer-social"> already serves as a container. So no need for the [container style="font-size: 40px"] shortcode, that would only make your HTML structure more complex.

Cheers!

[Author]

Posts