#129123 Drop caps bug
zzzorn 2 months ago
since some theme / elementor updates this year all paragraphs with drop cap & 2 or more columns have had a 40px top margin on the 1st column (tested on chrome, mac). This makes the layout broken. Please help me fix it. When I built the site 2 years ago the dropcap columns were working normally, but since some recent updates the problem appeared.Nodari Support Team 2 months ago
This problem can be easily fixed by this custom css:
Actually, I added it for you in the Appearance > Customize > Additional CSS, at the bottom
You may also change the value of the code for a better view for you
Best wisheszzzorn 2 months ago
this is not a solution, The problem still remains (see screenshot: the dropcap paragraph should be aligned to the second paragraph). Also adding that global css effects everything on site and messes my layout elsewhere so it is not a solution. As this bug has appeared after updates and is affecting some 50+ pages, I need it fixed in better way. The fix should only effect these 2-column paragraphs with drop cap.Tatyana Hutsol Support Team 2 months ago
Can you show a screenshot how you want to display the dropcap?
Regards.zzzorn 2 months ago
there is a screenshot attached. Red line marks where the 1st paragraph should be. Now it is some 40px down from the 2nd and not looking good.Amir Rather Support Team 2 months ago
I don’t see the screenshot anywhere, please kindly reattach it.
RegardsPrivateAlexander Hutsol Support Team 2 months agoThis reply has been marked as private.zzzorn 2 months ago
this is not what I meant.
Please check the screenshot again. The TOP of the 2nd column starting with “towards these….” needs to be aligned with the first column “Visual Artist….”. This is how columns normally work but as you can see the 1st column top is not aligned to the 2nd, since some Jupiter / Elementor updates (now using the newest versions).
I don’t want to align the 1st paragraph to the 2nd paragraph, which would render the text unreadable…
Please don’t touch the drop cap size.Mohsin Al-Rabieai Support Team 2 months ago
It’s because you have added a 40px margin top value to your text block. If you wish to increase the gap between your upper text and your paragraph, use a “Spacer” widget instead of adding margin top. Please remove it and the issue will be resolved. Check my screenshot for more info.
Bestszzzorn 1 month, 4 weeks ago
I see. Before recent Jupiter / Elementor updates adding top margin to a text block would effect all it’s columns, which is logical. Now it seems to effect only the 1st column. Is this a bug or is this something that should happen? I have at least 70+ pages which have this same top margin problem caused by the update. If this is a bug that will be fixed soon, then I’ll wait for the update rather than go manually through every page to fix this.Mohsin Al-Rabieai Support Team 1 month, 4 weeks ago
Well, I’m not sure if it was before this or not, because I tried with an elder version of Elementor and got the same result. (3.3). The thing is, Elementor is adding the CSS column property to the two-parent div elements. I just made a sample for a better understanding here:
This is how Elementor adds the column number to the text blocks. You can inspect the elements on your own website and see the same structure. As you can see, the same issue happens here too.
Now if I just add the columns to the first level parent of the text block, the issue will be resolved:
At first, I thought it could be an issue with the newly added feature “Optimized DOM”, but it wasn’t since I tried that to make sure about it. Then I checked the Elementor GitHub repository to see if this is a known issue or not, but couldn’t find any similar reports.
Apparently, this is not a popular way to add margins to the text blocks and because of that, it’s still hidden. I assure you that we had nothing to do with this issue in the theme and it’s all about the Elementor itself.
I believe it worth reporting to Elementor, however, I don’t have proof that it was not happening in the previous versions. If you have a live website where this issue is not happening, you may want to report it to Elementor community.
Another way to resolve this is to add margins to the column container of the text block instead of the textblock itself.