AEM 6.5: Unable hide or resize component in responsive grid layout

[Rajendar_Gangan]

Could not hide or resize the component in responsive grid layout mode for any mobile/tablet. Any idea what's missing?

Thanks

[B_Sravan]

Hi @Rajendar_Gangan ,

you should be able to do it, are you clicking on those blue dots to pull?
make sure you are on a language-master but not on a live copy to edit.

-Sravan

[Rajendar_Gangan]

Its working good in core container but not in custom component. So, I have to look for workaround.

[B_Sravan]

make sure your container has the layout setting set to "Responsive Grid"

[HrishikeshKa]

HI @Rajendar_Gangan ,

If you're unable to hide or resize components in the responsive grid layout for mobile or tablet devices in Adobe Experience Manager (AEM) 6.5, there could be several reasons for this issue. Here are some possible steps to troubleshoot and address the problem:

1. Check CSS Rules: Ensure that there are no CSS rules overriding the visibility or size of the components for mobile or tablet breakpoints. Inspect the CSS styles applied to the components in the browser developer tools to identify any conflicting styles.

2. Responsive Grid Settings: Verify the settings of the responsive grid container where the components are placed. Ensure that the grid container is configured to behave responsively and adjust the layout for different screen sizes. Check if the container has breakpoints defined for mobile and tablet devices and if the components are correctly configured within these breakpoints.

3. Component Properties: Review the properties of the components that you're trying to hide or resize. Check if there are any specific settings or properties related to visibility or size that need to be configured for mobile or tablet devices. Some components may have built-in options for responsive behavior that need to be enabled.

4. Check Page Structure: Verify the structure of the page where the components are placed. Ensure that the components are nested within the responsive grid container and that the container is properly configured to handle responsive layout changes.

5. Responsive Design Policies: Check if there are any responsive design policies or settings configured at the site or template level that may be affecting the visibility or size of components for mobile or tablet devices. Review these policies and adjust them if necessary to allow for the desired responsive behavior.

6. Testing on Multiple Devices: Test the page layout and component behavior on different mobile and tablet devices to ensure that the issue is not specific to a particular device or screen size. Use browser developer tools to simulate different device sizes and view the page layout accordingly.

7. Review Documentation and Best Practices: Consult the AEM documentation and best practices guides for responsive design and layout customization. Review any relevant documentation related to configuring responsive grid layouts and handling component visibility and sizing for different devices.

By systematically reviewing these aspects, you should be able to identify and address any issues preventing you from hiding or resizing components in the responsive grid layout for mobile or tablet devices in AEM 6.5

[kautuk_sahni]

@Rajendar_Gangan Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.