0

I am trying to set the Page Builder carousel to show less items on a 2 column layout compared to a 1 column layout.

Already I have updated the following file app/design/frontend/{Vendor}/{theme}/etc/view.xml in the theme to update the Page Builder carousel on 1 column templates for what I need.

        <var name="breakpoints">
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">768px</var>
                    <var name="min-width">640px</var>
                </var>
                <var name="options">
                    <var name="products">
                        <var name="default">
                            <var name="slidesToShow">3</var>
                        </var>
                        <var name="continuous">
                            <var name="slidesToShow">2</var>
                        </var>
                    </var>
                </var>
            </var>
            <var name="mobile-small">
                <var name="conditions">
                    <var name="max-width">639px</var>
                    <var name="min-width">360px</var>
                </var>
                <var name="options">
                    <var name="products">
                        <var name="default">
                            <var name="slidesToShow">2</var>
                        </var>
                        <var name="continuous">
                            <var name="slidesToShow">1</var>
                        </var>
                    </var>
                </var>
            </var>
            <var name="mini-mobile">
                <var name="conditions">
                    <var name="max-width">359px</var>
                </var>
                <var name="options">
                    <var name="products">
                        <var name="default">
                            <var name="slidesToShow">1</var>
                        </var>
                        <var name="continuous">
                            <var name="slidesToShow">1</var>
                        </var>
                    </var>
                </var>
            </var>
        </var>
    </vars>

Please review code above as this is what is needed to change the qty showing on screen sizes and not done in CSS/Bootstrap.

Can anyone advise how I could update this for 2 column layouts as these are very squashed together on that layout.

I have viewed this post for some help but not sure how to change this for 2 column layout - Magento 2: Page Builder Product Carousel slick slide custom options

1
0

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

1
  • Thanks for your response but the layout of items in the pagebuilder slider is done in XML and not CSS/Bootstrap, so what I need to know is how to add this for a 2 column layout in XML. Please note from my searching and reading Magento docs I am unsure if it can be done.
    – Andyjw
    Jul 27 '21 at 15:07
0

After a lot of searching and reading Magento docs I could not find a way how this can be achieved so I updated this the slider layout in css/less.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.