[alinagraceParticipant]

Hi!

My site isn’t live yet so I will provide my wordpress login as a reply to this topic. On my home page, I set up a row of buttons split into three columns and I would love for them to be closer together. Something like this:

I’ve looked all over the forum and can’t seem to find an answer for my problem. I’ve tried adding margin space and changing the column width size but it just ends up messing up all of the alignment, and it messes with the responsiveness of everything. I ran into this problem earlier with two 1/2 columns filled with text and I wanted the space between them just a little smaller and couldn’t get the results I wanted, so I just abandoned the layout choice and went with a different one.

Therefore, I was wondering if anyone could help me with something like this & so I could use it on other areas of my site not just specifically for this page.

Thanks in advance! I have all of the latest versions of WordPress, the theme, and shortcode plugin.

Alina 🙂

[alinagraceParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Alina,

Thanks for writing in!

Please add following CSS under Custom > CSS in the Customizer:

.home #x-content-band-8 > .x-container {
    max-width: 600px;
}

.home #x-content-band-8 > .x-container .x-column {
    width: 32.66666%;
    margin-right: 1%;
}

.home #x-content-band-8 > .x-container .x-column:last-child {
    margin-right: 0;
}

.home #x-content-band-8 > .x-container .x-column .x-btn {
    margin-top: 0;
}

Hope this helps. 🙂

Thank you.

[alinagraceParticipant]

Thanks so much!

If I wanted to make them even closer together, like the example above where there’s barely any space between them, would I need to make the buttons a fixed size so it wouldn’t affect the size of the button when changing the max-width?

And if I wanted to make items closer together on other pages, what actions would I take?
Change the .home to any page and then substitute the content band for the other content band?

Thanks again! I really appreciate it!

[DarshanaModerator]

Hi there,

If you want to add it without spaces, just add the button codes without the Column shortcodes.

Follow the example below.

[button shape="square" size="regular" float="none" href="http://www.google.com" info="none" info_place="top" info_trigger="hover"]Button 1[/button] [button shape="square" size="regular" float="none" href="http://www.google.com" info="none" info_place="top" info_trigger="hover"]Button 2[/button] [button shape="square" size="regular" float="none" href="http://www.google.com" info="none" info_place="top" info_trigger="hover"]Button 3[/button]

Also you can refer to the screenshot here (http://screencast.com/t/fdzY3nEiR).

Hope that’s clear.

[alinagraceParticipant]

Thanks so much for your help!

[FriechModerator]

You’re more than welcome, glad we could help,

Cheers.

[Author]

Posts