AEMAaCS site page elements hide on 125% resolution

[pradeepdubey82]

Hi Folks,

Site is looking fine on 100% resolution. When I change to 125% lot of elements on page is disappearing. 

How could I fix the website to 100% if the site is opening on larger device/resolution it fits to the respective device.

We are using react in front-end framework in AEMAaCS.

Any help is highly appreciates. 

Thanks,

Pradeep

[Nishant-Singh]

Hi @pradeepdubey82 

1. Use Responsive Design: Implement a responsive design for your website. This means designing and coding your website in a way that allows it to adapt and adjust its layout based on the screen size and resolution of the device being used to view it. You can use media queries in your CSS to define different styles for different screen sizes.

2. Fluid Layouts: Use fluid layouts instead of fixed widths for elements. Instead of specifying element widths in pixels, use percentages or relative units like "em" or "rem." This allows elements to adjust and scale proportionally based on the screen size.

3. Viewport Meta Tag: Add a viewport meta tag in the head section of your HTML. This tag helps the browser understand how to scale and adjust the website's layout on different devices. Here's an example of a viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

• Use Flexbox or Grid: CSS Flexbox and CSS Grid are powerful layout systems that can help create responsive and flexible designs. They allow you to create dynamic layouts that automatically adjust based on available space.

• Avoid Fixed Positions: Avoid using fixed positioning for elements that need to be visible at all times. Fixed positions may lead to overlapping or disappearing content on smaller screens.

[pradeepdubey82]

Hi Nishant,

1. I can see in html source of the page 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

2. Responsive div

<div class="root container responsivegrid">

Other points like fluid layout, flexbox I am not aware what are these, as I am not UI developer. I think AEM as cloud service OOTB creates responsive grid and all the components are placed inside responsive grid.

What else am I missing?

Thanks,

Pradeep

[kautuk_sahni]

@pradeepdubey82 If you have found out solution yourself, please share it with the community.