[Resolved] How to adjust the margin on Shortcodes

[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

[Fernando]

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

[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

[Fernando]

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

[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,

[Fernando]

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.

[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

[David]

Hi there,

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

[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

[Ying]

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!

[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

[Ying]

Glad you’ve sorted it out 🙂

Merry Christmas to you too!

[Author]

Posts