@bruce2004dedba wrote:
hallo, We are trying to design my home page fully using page builder, but the page builder is not working in responsive we had tried the page builder options to adopt in responsive but we can achieve what we need.
First the slider the slider is showing better in desktop when we go to responsive the slider and image is not getting small it shows very big only.
I need to show the 8 icons in one row at desktop version but when it comes to mobile need to show the 8 icons in two row set of 4 but when it comes to mobile version it show one buy one.
Hello bruce2004dedba,
When using the Page Builder in Magento 2.4.4, ensuring responsive design is crucial to provide a seamless user experience across different devices. To address the issues you mentioned with the slider and icon alignment, here are some steps you can take. Slider Responsiveness: Check if the slider element in the Page Builder has responsive settings or options. Look for settings related to image size, scaling, or breakpoints. Adjusting these settings can help the slider and its images resize appropriately for different screen sizes. Ensure that the slider element is set to be responsive and that the images used in the slider are optimized for various devices.
Icon Alignment To achieve the desired icon alignment, where 8 icons are shown in one row on desktop and two rows of 4 icons on mobile, you can follow these steps: a. Add a row element in the Page Builder and set it to have 8 columns. b. Place the icon elements within the columns of the row. Make sure each icon element is set to occupy 1 column width. c. In the Page Builder, look for responsive settings or options for the row element. Check for options related to column arrangement or stacking on smaller screens. d. Adjust the responsive settings of the row element to specify that on mobile devices, the columns should stack in sets of 4, creating two rows of icons. By configuring the responsive settings of the row element, you can control how the icons are displayed on different devices.
