Elementor Background Overlay On Mobile & Tablet

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
WhatsApp

CSS Code - Elementor Pro Version

				
					
/*Tablet background Overlay Elementor Pro*/
@media(max-width:1024px){
    selector.elementor-element > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
80deg, #000000 20%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}
/*Mobile background Overlay Elementor Pro*/
@media(max-width:767px){
    selector.elementor-element > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
180deg, #000000 20%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}
				
			

CSS Code - Elementor Free Version​

				
					/* CSS Class: bg-overlay */


/*Tablet background Overlay Elementor Free*/
@media(max-width:1024px){
    .bg-overlay.elementor-element.bg-overlay > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
90deg, #000000 30%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}

/*Mobile background Overlay Elementor Free */
@media(max-width:767px){
    .bg-overlay.elementor-element.bg-overlay > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
180deg, #000000 30%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}
				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

Hide Product Prices For Users On WooCommerce

https://youtu.be/4_xiZdE_No4 PHP Code // Hide prices add_action(‘after_setup_theme’,’magik_activate_filter’) ; function magik_activate_filter() { add_filter(‘woocommerce_get_price_html’, ‘magik_show_price_logged’); } function magik_show_price_logged($price) { if(is_user_logged_in() ) { return $price;

Add Icons To Your Elementor Form Fields With CSS

https://youtu.be/8qHZfpG2z-s Font Awesome fontawesome.com CSS Code /*placeholder spacing*/ selector form.elementor-form .elementor-field-group-email input, .elementor-field-group-name input, .elementor-field-group-phone input, .elementor-field-group-message textarea{ padding-left: 50px; } /*Icon

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.