Can't change short codes positions

Hi, anything I try to add as a short code using the text element is stuck in the left position and it can not be changed. I’ve tried moving it by adjusting margins padding and setting the right and left positions to auto, but nothing will change. I’m adding videos and share buttons using short codes and it works great, but I just can’t change their positions. I really need to center them.

Any help would be greatly appreciated!

Thanks!

Hi There,

Could you please provide us with the page URL you’re working?

I couldn’t find the text element you mentioned in your home page.

Thank you.

Hi @thai, on the home page at https://philliphaumesserphotography.com at the very bottom of the page there are some social sharing buttons. They are mostly centered because I used 3 columns to try to center them, but this doesn’t fix the issue, you can see it’s still slightly to the left.

Hello @Haumesser,

Thanks for asking. :slight_smile:

First I would suggest you to have a single column layout for social share elements. After that inspect the row inside section that’s holding the social icons and under Customize > Class assign a class name. Here is a quick screencast. Next, add following CSS under Pro > Theme Options > CSS:

.social-icons-class {
    display: flex;
    justify-content: center;
}

Please replace social-icon-class as per your own requirement.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thanks @Prasant, unfortunately, that didn’t seem to do anything.

Hi again,

I checked your site and noticed that the content on your site is being served by the cache. This could be just a cache issue, always make sure to purge the cache after making any change so you can see the changes right away. Please purge your plugin’s cache and also clear the browser’s cache as well.

Let us know how this goes!

I always purge the cache after I make changes. It still isn’t working.

Hey There,

Please change the layout to one column, then add the following CSS under Theme Options > CSS:

ul.heateor_sss_sharing_ul {
    max-width: 320px;
    margin: 0 auto !important;
    display: block;
}

Let us know how it goes!

That did the trick! Thanks so muvh @thai!

Actually wait, it only worked on the social buttons, my video player still won’t center. Here’s a link to the page where the video player is:
https://philliphaumesserphotography.com/photography-secrets-course

Password is: teachme

Hi There,

Please add this inline CSS: margin: 0 auto; to the universal_video_playerBorder class:


Let us know how it goes!

Are you saying put margin: 0 auto; in ROW >CUSTOMIZE > inline css?

I should also mention that the video player centers in cornerstone, but not on the website, even after clearing all of the caches.

Hi,

You need to add it to your video code inline css.

eg.

<div class="universal_video_player whiteControllers" style="margin:0 auto; width: 460px; height: 260px; left: 20px; top: 20px;">

Thanks

Sorry to sound ignorant, but where is the video code inline CSS?

Hi There,

If you can’t add the inline CSS to your shortcode, please add this custom CSS instead:

.universal_video_playerBorder {
    margin: 0 auto;
}

Let us know if the code works for you.

That did it! Thank you so much! :smiley:

You are most welcome!

All of this has been extremely helpful, and I am so very thankful. But I’m always using short codes in cornerstone and they all show up on the left.

This thread has been very helpful with centering individual short codes, but is there a why to do this with all short codes?

Maybe add some css that makes a certain class name centered, I don’t no. But it’s very frustrating having this issue every time I use a new short code. Any suggestions?

HI,

Can you provide us samples of the shortcode you are using?

If all the shortcodes are using the same class then we can add a general css that will center them by default but if the class is not the same and there is no similarity at all then you will need to do it individually.

Thanks