- This topic has 10 replies, 2 voices, and was last updated 6 years, 3 months ago by
.
-
Posts
-
Example attached.
Require spacing out each collapsing grimlock – I have 8 or so widget sections.
Hi @abourne,
You can easily change vertical padding for your Grimlock section widgets in the Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Widgets”. Then, open the widget area containing your widgets, browse to the one that you wish to edit and modify the “Vertical Padding” value.
This value is applied to all types of display. For mobile, the value is a bit smaller however based upon the same ratio (please view attachment).
This should solve your issue.
Regards,
Was regarding content and image on one subject grimlock widget, where there is content is one side and an image on the other side.
Per images attached earlier – as grimlock widget collapses to suit mobile – it compresses the content to be immediately under the image (or vice versa).
Vertical padding is between different widgets. Im speaking to the same widget, the left and right sides which collapse in sequence.
How to seperate the collapse on the SAME widget.
Hope this clarifies my query 🙂
Hi @abourne,
Thank you. You’re right, it’s much clearer. ?
Could point us to these pages in which you’re see this issue please? We cannot find them.All the best,
This reply has been marked as private.
This reply has been marked as private.
You’re correct on that. My failure to properly use the link html haha.
Here we go:
Attached is a solution, for mobile screens at least.
Achieved by using <br></br> before the ‘title’ text field.
Doing so to create this extra space for when images stack.
Only issue is being pushed down ‘un-naturally’ when on desktop view.
Please let me know if there is a more appropriate solution before I apply this fix to some 40-45 grimlocks I’ve placed among several feature pitch pages.
Screenshot_2018-12-04-c-Gymr-1
Screenshot_2018-12-04-c-Gymr3-1
Screenshot_2018-12-04-c-Gymr2-1
Screenshot_2018-12-04-c-Gymr1
Hi @abourne,
We don’t recommend using
<br>tags for spacing, as you noticed it can cause other issues like breaking alignments on desktop.Here is a CSS snippet that will add spacing between these elements on mobile:
@media screen and (max-width: 576px) { .widget .grimlock-section .grimlock-section__thumbnail { margin-top: 1rem; margin-bottom: 1rem; } }Please paste this snippet in your Custom CSS panel and it should resolve the issue.
Regards
Spent forever looking into random snips from forums – you guys are my lifesavers. Thanks a billion.
You’re welcome. ?
Best regards,
The topic ‘CSS to add a space between mobile stacking of grimlock elements’ is closed to new replies.
