Table of Contents
Removing Default Bottom Margins from Elementor Paragraphs
Elementor’s paragraph elements come with a default bottom margin, which often results in excessive spacing between designed elements on the page. To remove this default margin, add the following code to your theme’s stylesheet or the custom code section in Elementor Pro.
.elementor-text-editor p:last-child, .textwidget p:last-child { margin-bottom:0px;}
Customizing Elementor Page Breaks for Different Devices
To tailor your Elementor designs for specific devices like desktops, tablets, and mobiles, use the following CSS selectors. These allow you to apply custom styles depending on the device mode, ensuring a seamless and responsive design across all platforms.
body[data-elementor-device-mode=mobile]
body[data-elementor-device-mode=mobile_extra] // Aditional breakpoint
body[data-elementor-device-mode=tablet]
body[data-elementor-device-mode=tablet_extra] // Aditional breakpoint
body[data-elementor-device-mode=laptop] // Aditional breakpoint
body[data-elementor-device-mode=desktop]
body[data-elementor-device-mode=widescreen] // Aditional breakpoint
Here are some examples:
For Mobile Devices:
body[data-elementor-device-mode=mobile] .elementor-widget-heading {
font-size: 16px;
text-align: center;
}
body[data-elementor-device-mode=mobile] .elementor-section {
padding: 10px;
}
For Tablets:
body[data-elementor-device-mode=tablet] .elementor-widget-heading {
font-size: 20px;
text-align: left;
}
body[data-elementor-device-mode=tablet] .elementor-section {
padding: 20px;
}
For Desktops:
body[data-elementor-device-mode=desktop] .elementor-widget-heading {
font-size: 24px;
text-align: left;
}
body[data-elementor-device-mode=desktop] .elementor-section {
padding: 30px;
}
By incorporating these CSS selectors into your stylesheet, you can fine-tune your Elementor designs to look perfect on any device, providing a better user experience across mobile, tablet, and desktop views.
Full screen mobile/tablet dropdown menu
selector .elementor-nav-menu--dropdown.elementor-nav-menu__container {min-height: 100vh;}
Change background overlay position manually
.elementor-motion-effects-layer::before {
background-position: center right;
}
.elementor-motion-effects-layer::before {
background-position: center right -1px!important;
}
Transparency with HEX code
100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00
Menu Anchor Adjustment
Table of Contents
.elementor-menu-anchor {
top: -100px;
position: relative;
}
Normal Anchor Links
Add the following code to the Elementor Custom Code section and set the position to the </Body> – End
Clamp
The Preferred Value is typically based on the viewport width (vw) and should scale proportionally between the minimum size (at the mobile breakpoint) and the maximum size (at the desktop breakpoint). Here’s the formula:
Preferred Value = (Difference in Font Sizes) ÷ (Difference in Viewport Widths)
