Support » Plugin: Otter - Gutenberg Blocks – Page Builder for Gutenberg Editor & FSE » Return margin-right: …px; for button instead of gap: …px;

  • Resolved Vladimir Kazakov

    (@v0van)


    on one site I have Otter-blocks v1.6.4

    “button” in “Button Group”
    Indent – 20

    <div id="wp-block-themeisle-blocks-button-6ca5b6b3" class="wp-block-themeisle-blocks-button wp-block-button button_main"><a target="_self" rel="noopener noreferrer" class="wp-block-button__link"><span>.<strong>button_main</strong></span></a></div>
    /wp-content/uploads/themeisle-gutenberg/post-3879-1673177295.css?ver=1.6.4

    #wp-block-themeisle-blocks-button-group-912ea573 .wp-block-themeisle-blocks-button {
         margin-right: 20px;
    }

    it works

    on another site I have Otter-blocks v2.0.13
    also “Spacing = 20”
    but there is really no indent between the buttons!

    <div class="wp-block-themeisle-blocks-button-group collapse-mobile wp-block-buttons align-center-desktop align-center- tablet align-center-mobile button_group center ticss-8535c431">
    inline:2

    #wp-block-themeisle-blocks-button-group-79a6d353 {
         gap: 20px
    }

    and “button” in “Button Group” lost “margin-right: …px;”

    in the browser in the admin panel for some reason the indents are “gap: 20px;” between buttons work.
    <div class="block-editor-block-list__layout">
    /wp-content/plugins/otter-blocks/src/blocks/blocks/button-group/editor.scss:19

    .wp-block-themeisle-blocks-button-group .block-editor-block-list__layout {
         gap: var(--spacing);
    }

    it is not clear why “gap: 20px;” does not work in the browser on the site
    The browser inspector seems to understand gap: and when clicked displays:

    1.row-gap: 20px;
    2.column-gap: 20px;

    but there is really no indentation between the buttons !!

    updating to version 2.1.6 DID NOT HELP!

    return as it was before “margin-right: …px;” each button!

    RU:

    на одном сайте у меня Otter-blocks v1.6.4

    “кнопка” в “Button Group”
    Отступ – 20

    <div id="wp-block-themeisle-blocks-button-6ca5b6b3" class="wp-block-themeisle-blocks-button wp-block-button button_main"><a target="_self" rel="noopener noreferrer" class="wp-block-button__link"><span>.<strong>button_main</strong></span></a></div>
    /wp-content/uploads/themeisle-gutenberg/post-3879-1673177295.css?ver=1.6.4

    #wp-block-themeisle-blocks-button-group-912ea573 .wp-block-themeisle-blocks-button {
        margin-right: 20px;
    }

    это работает

    на другом сайте у меня Otter-blocks v2.0.13
    также “Spacing = 20”
    но отступа между кнопками реально нет!

    <div class="wp-block-themeisle-blocks-button-group collapse-mobile wp-block-buttons align-center-desktop align-center-tablet align-center-mobile button_group center ticss-8535c431">
    inline:2

    #wp-block-themeisle-blocks-button-group-79a6d353 {
        gap: 20px;
    }

    а “кнопка” в “Button Group” утратила “margin-right: …px;”

    в браузере в админке почему то отступы “gap: 20px;” между кнопками работают.
    <div class="block-editor-block-list__layout">
    /wp-content/plugins/otter-blocks/src/blocks/blocks/button-group/editor.scss:19

    .wp-block-themeisle-blocks-button-group .block-editor-block-list__layout {
        gap: var(--spacing);
    }

    непонятно почему “gap: 20px;” не работает в браузере на сайте
    инспектор браузера вроде бы понимает gap: и при клике выводит:

    1. row-gap: 20px;
    2. column-gap: 20px;

    но реально отступов между кнопками нет!!

    обновление до версии 2.1.6 НЕ ПОМОГЛО!

    верните как было раньше “margin-right: …px;” у каждой кнопки !!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter Vladimir Kazakov

    (@v0van)

    I always use in code “@media screen” and margin and it was inaf for me.
    ideally works

    @media screen and (min-width: 480px) {
        #wp-block-themeisle-blocks-button-group-912ea573 .wp-block-themeisle-blocks-button {
           margin-right: 20px;
        }
    }

    why you using gap ?????
    why change that what was ideally works ?????

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @v0van,

    We made the change as margin didn’t work always and it was having issues when buttons were on different lines. For your issue, can you send us link to a page where this is happening so we could inspect and see why there’s no indentation between the buttons?

    Thank you!

    Thread Starter Vladimir Kazakov

    (@v0van)

    when buttons were on different lines

    will margin from screen border

    wp-block-themeisle-blocks-button a.wp-block-button__link,
    wp-block-button a.wp-block-button__link {
    	margin-left: 12px;
    	margin-right: 12px;
    }
    
    .button_main a, .button_more a {
    	margin-left: 12px;
    	margin-right: 12px;
    }

    .button_main a, .button_more a – my class buttons

    can you send us link to a page where this is happening so we could inspect and see why there’s no indentation between the buttons?

    no.
    on the forum admins forbade me to mention the address of my site as VolanDeMort’s name
    when will on other site I wrote in future )

    why gap works in the admin panel and not on the site – it is not known. interesting

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    @v0van I found out your website with some digging into the archive.org 🙂 – can you give me a link to the page where it’s happening with the domain name removed?

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Also I just noticed that you’re running a very old version of Otter Blocks which is more than a year old so that might be one of the reasons.

    Thread Starter Vladimir Kazakov

    (@v0van)

    https://woo.vveb.ws/demo_color-schemes/
    Otter v2.1.6
    WordPress 6.0.1

    here I made a landing page with buttons

    Also I just noticed that you’re running a very old version of Otter Blocks which is more than a year old so that might be one of the reasons.

    so this version worked for me.

    I have WP=5.6.5 installed on another site and it works much better than WP=6 by the way. It’s just that I build websites for clients, not for myself, and clients want to get the latest versions of WordPress and WooCommerce. And there are always a lot of problems with updates.

    RU:
    вот я сделал страницу-лендинг с кнопками

    Также я только что заметил, что вы используете очень старую версию Otter Blocks, которой больше года, так что это может быть одной из причин.

    значит эта версия у меня работала.

    у меня на другом сайте установлен WP=5.6.5 и работает кстати намного лучше чем WP=6. Просто я делаю сайты для заказчиков, а не для себя, и клиентам по идее хочется получить последние версии WordPress и WooCommerce. А с обновлениями всегда очень много проблем.

    Thread Starter Vladimir Kazakov

    (@v0van)

    I will complete certain pages, check the functionality.
    Then I will backup the site.
    And then maybe someday I will update WP and plugins.

    RU:
    Я доделаю определённые страницы, проверю работоспособность.
    Потом сделаю бэкап сайта.
    А потом возможно когда-то обновлю WP и плагины.

    Thread Starter Vladimir Kazakov

    (@v0van)

    among all the multi-buttons, only your “Otter – Button Group” allows you to recolor in css themes, that’s why I prefer to use them. Examples:
    https://woo.vveb.ws/demo_color-schemes/?colorscheme=grasshttps://woo.vveb.ws/wp-content/themes/shoplanding/schemes/grass.css
    https://woo.vveb.ws/demo_color-schemes/?colorscheme=skyhttps://woo.vveb.ws/wp-content/themes/shoplanding/schemes/sky.css
    It’s comfortable!

    the rest of the “Button Group” inscribes the CSS colors of the buttons inline and, accordingly, they cannot be reassigned to the CSS of the theme:
    Ultimate — MultiButtons
    PublishPress — Advanced Button
    Genesis Button

    RU:

    среди всех мульти-кнопок только Ваш “Otter – Button Group” позволяет перекрашивать в css темы, поэтому я ними и предпочитаю пользоваться. Примеры:
    https://woo.vveb.ws/demo_color-schemes/?colorscheme=grasshttps://woo.vveb.ws/wp-content/themes/shoplanding/schemes/grass.css
    https://woo.vveb.ws/demo_color-schemes/?colorscheme=skyhttps://woo.vveb.ws/wp-content/themes/shoplanding/schemes/sky.css
    Это удобно!

    остальные “Button Group” вписывают CSS цветов кнопок inline и соответственно в CSS темы их невозможно переназначить:
    Ultimate — Multi Buttons
    PublishPress — Advanced Button
    Genesis Button`

    Thread Starter Vladimir Kazakov

    (@v0van)

    https://ibb.co/n7JYSdy
    https://woo.vveb.ws/demo_color-schemes/?colorscheme=grass

    On the screenshot, everything is clear both on the site and in the admin panel.

    I updated Otter – Gutenberg Blocks to 2.2.0.

    If I turn off “margin-left: 12px;” and “margin-right: 12px;” then the buttons become almost right next to each other. Is there any gap here?
    what do I see:

    #text 3,96667×19

    “gap: 20px;” The browser sees but does not react to it in any way.
    if you uncheck “gap: 20px;” the buttons don’t move. why???
    inline:2

    #wp-block-themeisle-blocks-button-group-79a6d353 {
         gap: 20px
    }

    gap: 20px works in the admin panel, but on the site DOES NOT WORK.
    editor.scss: 19

    .wp-block-themeisle-blocks-button-group .block-editor-block-list__layout {
         gap: var(--spacing);
    }

    RU:

    на скриншоте всё понятно как на сайте и вадминке.

    Я обновил Otter – Gutenberg Blocks до 2.2.0.

    Если я отключаю “margin-left: 12px;” и “margin-right: 12px;” то кнопки становятся практически впритык друг к другу. Тут есть какой-то пробел ?
    что я вижу:

    #text 3,96667×19

    “gap: 20px;” браузер видит но никак на него не реагирует.
    если снять галку с “gap: 20px;” то кнопки не сдвигаются. почему???
    inline:2

    #wp-block-themeisle-blocks-button-group-79a6d353 {
        gap: 20px;
    }

    gap: 20px; работает в админке, а на сайте НЕ РАБОТАЕТ.
    editor.scss: 19

    .wp-block-themeisle-blocks-button-group .block-editor-block-list__layout {
        gap: var(--spacing);
    }
    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @v0van,

    The gap doesn’t interact as other CSS isn’t being loaded. I see the CSS of Button Group isn’t being loaded on your website. Have you disabled certain CSS from loading?

    Thread Starter Vladimir Kazakov

    (@v0van)

    I see the CSS of Button Group isn’t being loaded on your website. Have you disabled certain CSS from loading?

    Hard to say.
    Of course, I added CSS in my theme, but I didn’t purposely disable anything, I guess.

    RU:
    трудно сказать.
    я конечно добавлял CSS в своей теме но целенаправленно ничего не отключал наверное.

    Plugin Support luciamarinescu

    (@luciamarinescu)

    Hi @v0van!

    Certain speed optimization or caching plugins may optimize CSS delivery. If you use such a plugin, you could check if that’s the case by disabling it and seeing if it makes any difference.

    Have a nice day!

    Thread Starter Vladimir Kazakov

    (@v0van)

    thanks

    I use
    WP Fastest Cache 1.0.4 – https://wordpress.org/plugins/wp-fastest-cache/
    and can renew 1.1.0

    I try later on other demo-site

    Thread Starter Vladimir Kazakov

    (@v0van)

    the situation is very strange!

    I tried on another site
    I also did if the buttons are nested in OtterBlock
    https://mobil.vveb.ws/otter-buttons-gap-demo/
    on site works!
    works in admin!

    mobil.vveb.ws is a clone of woo.vveb.ws.
    the set of plugins is the same. everything is the same.
    mobil.vveb.ws is just a demo for broken plugins.

    maybe an error due to the fact that full-fledged landing pages use the CSS of other block plugins?
    it at a leisure it is necessary to turn off and turn on one at a time.

    RU:

    ситуация крайне странная!

    я попробовал на другом сайте
    ещё сделал если кнопки вложены в OtterBlock
    https://mobil.vveb.ws/otter-buttons-gap-demo/
    на сайте работает !
    в админке работает !

    mobil.vveb.ws это клон woo.vveb.ws.
    набор плагинов тот же. всё такое же.
    mobil.vveb.ws это всего лишь демо для неработающих плагинов.

    может быть ошибка за счёт того что на полноценных лендингах используются CSS других плагинов блоков?
    это на досуге надо по одному отключать и включать.

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    You can use the Health Check plugin’s Troubleshooting mode to disable all your plugins and enable them one by one: https://wordpress.org/plugins/health-check/

    This only disables them for only you as admin while for rest of your users will see the website normally.

Viewing 15 replies - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.