5 Elementor CSS Tricks You Should Know | Form Height, Hover Box, & SVG Hover Effect

[@daniel.trapanese]

Great Stuff! Finally I can adjust the position of the images. This CSS Tuts are very welcome! Cheers!

[@danilobatista251]

Nice! Thanks for sharing.

[@LuckyBravo]

You are awesome. This is very helpful. I can't believe you uploaded it just when I needed it. A weird coincidence.

[@UrielSoto]

I can read minds haha. I figure I can't be the only one having these issues. What part are you referring to?

[@godeons]

Heading and textbox editor widget size not changing on mobile and tablet even after setting different values. Please help

[@AMITROY-uc7dd]

As captain like always! Awesome

[@UrielSoto]

Appreciate it!

[@makhmetov]

Cool. Thanks!

[@prokassim]

Thank you very much for really awesome and useful tutorial :

[@UrielSoto]

Thanks 🙏🏼

[@prokassim]

I have tried it and it worked !! I'm so GREATFUL for your help, YOU SOLVED A BIG PROBLEM FOR ME !! again wish you success.

[@UrielSoto]

@@prokassim You're welcome! I get a thrill out of solving problems. I'll have a video on this next week.

[@prokassim]

@@UrielSoto Thank you very much, Can't wait to see that tutorial, you are a life saver .

[@daniel.trapanese]

Hi Uriel. In the latest version of Elementor, the image box is able to set the image on the side, but still, cannot be centered horizontally, the way that you centered the icon box in one of your tutorials. Is that possible? Cheers

[@estate0007]

I was always wondering how to add a hover state to all elements in a box, thought I would need JS for that. Pretty easy now if you know how to do it :-) Thanks a lot, mate!

[@UrielSoto]

Yeah its pretty cool. Should open up many doors haha.

[@YAFONOOB]

Does anyone know how to add CSS to change the color, size and position of the "copy to clipboard" button in "Code Highlight Widget" in Elementor Pro? Perhaps the name of the button is ".copy-to-clipboard" but I'm not sure, I've tried CSS generated by ChatGPT but none of them worked.

[@shaunazar]

Thanks for sharing Uriel. I'm curious how you would handle a 2 section column, where you only want one of the two columns to be full width (say for an image) but the other to follow the box width of 1140. Only method I found was just setting a max-width for the smaller column of 570 but just wanted to see if there was a better way to do this.

[@franktielemans6624]

Targeting the svg path might be not enough for some icons.
Sometimes a icon can contain rect, circle, ellipse, polyline, polygon or line svg elements
And when it's a circle, rect, ellipse or polygon you have to use the stroke property instead of fill.

[@UrielSoto]

Thanks for the tip!

[@franktielemans6624]

@@UrielSoto Also, I think in some cases you can use filiter:invert(1) to turn black into white. (or the other way around)

[@ericuk9481]

Hi on hover css, can the selector be an image instead of a column?

[@prokassim]

By the way do you have any tutorial or maybe you can make one on how to make the contact form ( in line ) instead of vertical , I really can't find some tutorial on that ! thank you in advance :

[@UrielSoto]

Witch contact form? Elementor form

[@prokassim]

@@UrielSoto Elementor form, or the regular contact form 7, either will be much appreciated.

[@UrielSoto]

@@prokassim have you tried adjusting the field percentage and making the column long?

[@prokassim]

@@UrielSoto yes but it the form will still be vertical and not horizantal !

[@UrielSoto]

@@prokassim
Add this to the form widget custom css
selector .elementor-form-fields-wrapper {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
selector .elementor-field-type-submit {
width: 50% !important;
}

[@edwardfabunmi]

❤❤❤❤❤❤❤❤❤❤