[JohnDelaGuardiaParticipant]

Hi,

Can you please kindly tell me how to make my footer something similar to this one, http://www.stampd.com/?

My website is JohnDelaGuardia.Com

Thank you.

Regards..

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-colophon.bottom {
    padding: 0;
}
.x-social-global, footer .x-nav, .x-colophon-content {
    float: left;
    display: inline-block;
    width: 33%;
}

Hope that helps.

[JohnDelaGuardiaParticipant]

Hi, thank you very much for your assistance. Works but…

How do I shrink the height of the footer to half of what it is? Also, I’d like to have the “x-colophon-content” to be way under the footer and make it smaller.

Cheers!

Thank you.

[ThaiModerator]

Hi There,

Please try adding the following CSS:

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-social-global,
.x-colophon.bottom .x-nav {
    margin: 10px 0;
}
.x-colophon.bottom .x-colophon-content p {
    margin: 0
}

Hope it helps 🙂

[JohnDelaGuardiaParticipant]

Again, thank you. I hope you’ll still help me with this one… I really appreciate it.

What I wanted is to have the social to be on the far left, the menu to be on the far right and the the content to be in the middle-way below both social and menu.

Thank you very much for your help.

Have a good one.

[ChristopherModerator]

Hi there,

Find this code :

.x-social-global, footer .x-nav, .x-colophon-content {
    float: left;
    display: inline-block;
    width: 33%;
}

And update it to :

.x-social-global, footer .x-nav {
  float: left;
    display: inline-block;
    width: 48%;
}

Add this as well :

footer .x-container.max.width {
    width: 100%;
    max-width: 100%;
}
footer .x-social-global {
    text-align: left;
}
footer ul#menu-main-2 {
    text-align: right;
}

Hope that helps.

[JohnDelaGuardiaParticipant]

Hi, that didn’t seem to do it… the content is still on the same line as the social and menu.

How do I make the “JDG Creative 2016” smaller and be centered, about 2 spaces below the in-lined Social(left side) and Menu(right side).

Much appreciated.

[ChristopherModerator]

Hi there,

Please remove this code :

.x-social-global, footer .x-nav, .x-colophon-content {
    float: center;
    display: inline-block;
    width: 33%;
}

And instead add this one :

.x-social-global, footer .x-nav {
    display: inline-block;
    width: 48%;
    margin-bottom: 0 !important;
}
.x-colophon-content {
    font-size: 10px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

Thanks.

[JohnDelaGuardiaParticipant]

Hi, that worked well… but one last question please… I’m kinda what to have the flexibility to move around the “JDG Creative 2016” so I did try putting it to the left but I don’t want to to be extreme left..

what would be the css that I need to add if I want it to be just under the social icons specifically below facebook icon and it follows when I adjust the window.

Cheers guys. You rock. This will be my last question on this one, I promise 🙂

Hope you have a great day.

[RupokMember]

Hi there,

Thanks for updating. Upon checking your website I am not sure what you are actually meant by JDG Creative 2016 as I can’t see such elements anywhere. Please clarify the issue a bit with a screenshot that what you are trying to accomplish.

Cheers!

[JohnDelaGuardiaParticipant]

Sorry, I mean the “.x-colophon-content” – how do I relocate it below the social icons in footer area.

Thank you.

[JohnDelaGuardiaParticipant]

Also, I just realized that this whole css setting is changing the layout of the social icons in the top of the page too.. I don’t want to change the top… just the bottom footer only.

[JohnDelaGuardiaParticipant]

Okay, I’ve manage to create a .png file image of the look I want (attached). Can you please kindly tell me if this is possible without changing the top social icons layout?

Thank you.

[John EzraMember]

Hi there,

Thanks for updating the thread! Please change previous CSS to the following:

.x-colophon .x-social-global, footer .x-nav {
    display: inline-block;
    width: 48%;
    margin-bottom: 0 !important;
}
.x-colophon-content {
    width:52%;
    font-size: 10px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

Hope this helps – thanks!

[Author]

Posts