Desabling fading effect of an element in an animated column

Support
#1

Hi there!

I am working on a fading animation for some columns but I only want parts of the column do be animated. Is there a way I can stop particularly animations of column elements by CSS?

That’s is the site I am talking about:
http://www.vallesol.com.uy/cuisine/

The Idea is that, for example just the fork will fade in from the left-side but not the text.

  • Another question: is it possible to disable the inner container for just one column in a row with two columns? Maybe by css? Thanks so much!

Thanks a lot!

#2

Hi,

  1. Regretfully, It could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

  2. Columns don’t have inner containers. You can try adding width:100%;max-width:100%; to the elements inside your column to make it fill the whole width of your column element.

Thanks

#3

Thanks Paul,

thanks for the information.

About the second point: Sorry, I was talking about the inner containers of the row.
So I put the “width:100%;max-width:100%;” into the CSS of the row but now it changes both columns of course - is there a way I can just adjust one column?

Thanks so much!

#4

Hello There,

Thanks for updating in! Please understand that column container option holds the maximum width and the width of the row container. Are you trying to adjust the width of your column? I think I am seeing your issue. When the column container is enabled, you have this?

You want your text to align to the image and the text above. In the first place, you added a padding in your text element and this is why you are having this issue. Simply edit your page, and make sure that both the text elements has a left padding of zero so that you will this something like this:

Hope this helps.

#5

Hi there,

thanks for the help but that’s not what I intent to do.

The idea is to leave the fork at the very left of the screen border - so it seems that the fork looks halfway into the website - but the text column “Uruguayan” stays in the container. So I don’t need to adjust it with paddings.

So again. I want the inner container turned on for the row, so the Text-Column and the gallery on the right can stay in correct positions. Only for the “fork”-column I want to turn off the inner container. Is that possible to do by css? It should, shouldn’t it?

Thank you so much, I appreciate your help!

#6

Hi There,

Thank you for the clarification. Upon checking your setup, I can see you have achieve it already:

The issue with how you have achieve it is the text above the image will not always be aligned properly from the left compare to other contents. There’s other ways to achieve it, like using the image as background for section and still settings container to on so the text is still align with other content. But this will have it’s own setback in relation to responsiveness. It will overlap on other content on other screensize. What I am saying is, compare to other options/solutions, that is the best that needs less fixing.

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.