Social hover not displaying

[Deesign]

Hi Team X,

Struggling with getting a hover effect on the social icons for our footer.
The css styling works in the cornerstone workspace but not on the front end.

.x-social-global a:hover {
color: #fff !important;
background-color: #994757 !important;
}

Another quick question is about the Background Upper Layers for a Row in our second and third row on the below page. The white text image we’ve added to the upper layer is perfect for desktop and laptop views but for the mobile view we see two different issues on two different screens, #1 - the entire background image part of the row is displayed as a thin line of the image only - see ss below or #2- the top text image layer is so small on top of the background image (when it displays) that we can’t read it. Do you have any tips on how to style these rows to display on mobile - specifically about the display size of the Background Upper Layer image on mobile.

[friech]

Hi @DeeDesign,

Thank you for writing in, 1). That custom CSS of yours above is correct, But there is a CSS syntax error somewhere on your custom CSS, please check all your custom CSS here and address the error(s).

2). Add a gap element on those empty columns so it will have a height when the column get into stack layout, currently, those empty columns have no height, they are just leveraging the height of the columns next to it. But on mobile, there is no next column to leverage with. Those columns need to have its own height on mobile, use the Gap element.

Hope it helps,
Cheers!

[Deesign]

2 home runs! Thank you for the direction.
I’m still having issues with the responsive size of the upper images in the columns I have now added the gaps to. The upper layer image text is not displaying within view of the mobile column height, I attempted to use percentages to solve the issue - is the correct way to use these settings?

It seems to be working for “the Bar” row but not “the Menu” row.
Is there a setting to adjust the size or position of the background lower layer image for mobile so the content in the middle of the image is displayed, and not the current top left corner?

I also can’t seem to find the Enable Fade Effect that I’ve used on other X sites, it’s usually at the top of the column settings - do I have to turn on something to see this setting again?

Many thanks!

[ruenel]

Hello @Deesign,

Since the gap element do not work for you, you can set a minimum height for the column instead so that in smaller screens, when the columns gets stacked below each other, your column will have its own height.

The Fade Effects animations were only available in Classic Columns. In the new columns, you do not have that feature. Perhaps you might be interested in having a fade animation in the new elements. Please check out this video tutorial here:

Hope this helps.

[Deesign]

Mind blown… thank you for sharing the video.
Down the rabbit hole I go

[ruenel]

You are most welcome!