AEMAaCS site page elements hide on 125% resolution | Community
Skip to main content
P
pradeepdubey82
Level 5
August 3, 2023

AEMAaCS site page elements hide on 125% resolution

  • August 3, 2023
  • 2 replies
  • 769 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Nishant-Singh
Adobe Employee
Nishant-SinghAdobe Employee
Adobe Employee
August 3, 2023

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.

    P
    pradeepdubey82Author
    Level 5
    August 3, 2023

    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
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      November 23, 2023

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

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...