Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Best practices for image handling/sizing for hero designs

Avatar

Level 1

I am a product designer and have been tasked in finding the best practices for standard image sizes for heros on multiple breakpoints. Please if someone can help break this down to me or point me in the right direction I would appreciate the help. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Tracible,

Responsive Layout

AEM allows you to have a responsive layout for your pages by using the Layout Container component.

This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format.

Please have a look at [0] & [1]. Also, worth checking Understanding Responsive Layout [2]

[0]: https://experienceleague.adobe.com/docs/experience-manager-64/assets/dynamic/best-practices-for-opti...

[1]: https://experienceleague.adobe.com/docs/dynamic-media-classic/using/image-sizing/quick-start-image-s...

[2]: https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/responsive-lay...

Hope that helps!

Regards,

Santosh

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @Tracible,

Responsive Layout

AEM allows you to have a responsive layout for your pages by using the Layout Container component.

This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format.

Please have a look at [0] & [1]. Also, worth checking Understanding Responsive Layout [2]

[0]: https://experienceleague.adobe.com/docs/experience-manager-64/assets/dynamic/best-practices-for-opti...

[1]: https://experienceleague.adobe.com/docs/dynamic-media-classic/using/image-sizing/quick-start-image-s...

[2]: https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/responsive-lay...

Hope that helps!

Regards,

Santosh