Site logo

[Resolved] How to adjust the margin on Shortcodes

Home Forums Support [Resolved] How to adjust the margin on Shortcodes

Home Forums Support How to adjust the margin on Shortcodes

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2467842
    Robert

    Hi,
    Seasons greetings.
    I am creating a directory that uses a plugin. To layout the page that will be used by each listing I am using lots of shortcodes (20+ on the page).
    There is too much white space on the page around each shortcode and some I would like to be next to each other.
    Each shortcode is within a container block for all the benefits they offer. I have tried setting the margins of the container block to negative values which sort of works but becomes difficult when switching between mobile/tablet/pc.
    I think the issue is all the shortcode having too large a margin built in?
    Is it possible to adjust the margins?

    Many thanks,
    Rob

    #2467843
    Fernando
    Customer Support

    Hi Robert,

    For reference, can you provide the link to where we can see the issue?

    You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #2467858
    Robert

    Hi,
    The directory aspect of the website is still under development but the pages are published just not accessible via the menu system.

    I have given the Url for three example pages below but they are all created using a standard layout that is then populated by shortcodes.

    Thanks,
    Rob

    #2467859
    Fernando
    Customer Support

    Can you point us to a specific output of a shortcode with unwanted spacing size on one of these pages?

    #2467875
    Robert

    Hi,
    An example would be the two shortcodes that show the categories (Entertainment, Music) and the social icons.

    Lower down the page there are shortcodes for Whitepaper and Website that have a big gap between and beneath.

    Same for the sentences :
    Theta Network is on which Blockchains:
    Ethereum , Theta

    What is/are the native tokens of Theta Network :
    TFUEL , THETA

    they are both generated by shortcodes and the gaps below seem too big, particularly on the mobile.

    many thanks,

    #2467881
    Fernando
    Customer Support

    I see. For one, your Shortcodes have this CSS code adding bottom margin to them:

    .drts-display--detailed {
        margin-bottom: 2em;
    }

    To disable this, add this CSS through Appearance > Customize > Additional CSS:

    drts-display--detailed {
        margin-bottom: 0 !important;
    }

    Now you can just simply rely on the Container Block’s spacing settings to set the spacing you prefer.

    #2467891
    Robert

    Hi,
    Thank you, that does work but not quite as much as I hoped.

    I cant identify what I need to change.
    As an example I would like to have the Whitepaper and Website links right next to each other.

    I would like the two sentences (below) to not have such a large gap between the rows:
    Theta Network is on which Blockchains:
    Ethereum , Theta

    What is/are the native tokens of Theta Network :
    TFUEL , THETA

    Will this require custom settings for each container? Is there a way to make the container adjust its size to fit the contents?

    Thanks,
    Rob

    #2468541
    David
    Staff
    Customer Support

    Hi there,

    did you resolve this ? As looking at the URL provided, i don’t see the “extra” space

    #2468637
    Robert

    Hi David,

    I am trying to deal with some of the space issues by adjusting the margins of the containers. However, many of the issues are more apparent when viewing on mobile.

    I am still not totally happy and am struggling to know where the space is coming from; I am not a coder so do not know how to read that to find out more.

    I have been updating the page today so it may look different to when you last looked.

    The current issue is a gap under the image inside the container border at the top of the page.

    Many thanks for any insight or where how I should be looking to figure it out.

    Regards,
    Rob

    #2468675
    Ying
    Staff
    Customer Support

    Hi Rob,

    Are you referring to this image? I’m not seeing a gap under the image:
    https://www.screencast.com/t/DlgOPorQ

    Let me know!

    #2469802
    Robert

    Hi,
    Apologies my last message did not get thru apparently.

    I had just sorted the problem and actually tried to reply within minutes of you posting. It seems the plugin adds space in the field that is used for the shortcodes but not consistently. Some fields have larger gaps and some none at all.
    Anyway, currently all sorted!

    Thanks as always for excellent support.

    Merry Christmas

    #2469877
    Ying
    Staff
    Customer Support

    Glad you’ve sorted it out 🙂

    Merry Christmas to you too!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.