Columns as buttons

Support
#1

Hi, I have another question.

I have a ROW - no inner container / Marginless Columns on.
In the 3 columns I have a png image (just white text/icon on transparent background) .
These image have links to other pages : therefore I want to have them change in colour a bit while hovering over them.
I put the background colour & interaction colour of the image to them
To have the complete image (column - width) change from colour while hovering over, I had to set the image width to 100%.
Otherwise on hover you see the interaction color only on the image-size.

But now : when the screen is very large: the image is not centred. I set all the column / row / etc. text aligns to center. But it does not seem to work.
See the images:

Smaller sizes are oke:

larger sizer, the images do not center:

Can somebody please advise?

Is this a correct way of creating what I want?

Thanks in advance

#2

Hi There,

Please try adding the following CSS under X > Theme Options > CSS:

.e2185-11.x-section .x-image img,
.e2185-22.x-section .x-image img {
    margin: 0 auto;
}

Hope it helps :slight_smile:

#3

Yes, great. This works!

Could you please explain to me what the '.e2185-11.x-section ’ means?
In case I want to use this on other places too?
Perhaps I can work with ID’s or with Classes?

Tnx in advance for your help.

#4

HI there,

Those are the default classes added the sections.

You can always add your custom class to every section. You can do this by selecting the customize option of the section settings and you will be able to add the class from there.

Then you can simply update the CSS to:

.the-section .x-image img {
    margin: 0 auto;
}

Assuming that the class you added to the sections is the-section

Hope this helps.

1 Like
#5

Thanks for the information! Great.