CSS to add a space between mobile stacking of grimlock elements

Home Forums Gwangi – Dating & Matchmaking Community Theme Theme Customizer Widgets CSS to add a space between mobile stacking of grimlock elements

This topic contains 10 replies, has 2 voices, and was last updated by  themosaurus 3 days, 15 hours ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #3788

    alex
    Participant
    • 187 Posts
    @abourne

    Example attached.

    Require spacing out each collapsing grimlock – I have 8 or so widget sections.

    #3820

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    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,

    #3837

    alex
    Participant
    • 187 Posts
    @abourne

    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 🙂

    #3863

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    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,

    #3990

    alex
    Participant
    • 187 Posts
    @abourne
    This reply has been marked as private.
    #4026

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus
    This reply has been marked as private.
    #4028

    alex
    Participant
    • 187 Posts
    @abourne

    You’re correct on that. My failure to properly use the link html haha.

    Here we go:

    https://www.gymr.com.au/c/

    #4052

    alex
    Participant
    • 187 Posts
    @abourne

    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.

    #4068

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    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

    #4093

    alex
    Participant
    • 187 Posts
    @abourne

    Spent forever looking into random snips from forums – you guys are my lifesavers. Thanks a billion.

    #4098

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    You’re welcome. 🙂

    Best regards,

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘CSS to add a space between mobile stacking of grimlock elements’ is closed to new replies.