Set Button width to column width in Page Builder

gridmagento2page-builder

Explanation

I have a 3 by 2 grid with equal wide columns on my starting page which I created with Page Builder. In each of the cells there is a picture and a button. In different browser sizes the images always use the full width of the column. The buttons however differ from that behaviour. There are certain browser sizes when the button is narrower than the picture which is a pain for the eye.

The system is Magent Commerce, ver. 2.4.2-p2
I've reproduced this with both Google Chrome and Firefox

My question:

How can I configure the buttons to always use the full width of the column?

Best Answer

I found the solution: We need to add "min-width: 100%" to the button-item in CSS. Now our solution partner needs to add the min-width to the style sheets. Unfortunately I can not do this in page builder.

Update 20211013:
In the mean time I found a more elegant way to solve the problem in page builder: To get the desired layout and element behavior I need only align appearance attribute of Button element with the value "Stacked"

Related Solutions

Magento – Magento 2: Set Grid column width

Resize can be switched on for any listing column like this:

<column name="creation_time">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="resizeEnabled" xsi:type="boolean">true</item>
            <item name="resizeDefaultWidth" xsi:type="string">60</item>
        </item>
    </argument>
</column>

If above not working use below best way.

Update width parameter from CSS or .less file of adminhtml theme

.data-grid .data-grid-thumbnail-cell img {
    border: 1px solid #d6d6d6;
    width: /*change per your wish*/;
}

Magento 2: Page Builder Product Carousel custom options 2 column Layout

Magento itself and typically all magento themes uses bootstrap library for layout and for 2 column layout, usually the width configuration is 33.33 & 66.66 or 25 - 75 for desktop layouts, and for smaller screens these 2 columns are placed one after another in display.

So for your requirements, you can set nos. ins the same ratio as your columns are defined, if they are defined like 25-75 so no. of products for a 1024 resolution can be 3 instead of 4 but for smaller screens where your 2 columns are placed below each other, you can keep the same nos.

Hope I didn't misunderstand your question a

Best Answer

Related Solutions

Magento – Magento 2: Set Grid column width

Magento 2: Page Builder Product Carousel custom options 2 column Layout

Related Topic