international-labour-organization / designsystem

A design system for the International Labour Organization
Apache License 2.0
1 stars 3 forks source link

Review size of hero image when poster size is 'x-large' #1013

Open inesdgomes opened 4 months ago

inesdgomes commented 4 months ago

Hi @justintemps We have this issue with hero images taking too much height on the screen to the point in which users cannot even see the page title when they land on the page. This happens when poster size is set to 'x-large'. Would it be possible to set the images sizes in % rather than absolute numbers to ensure the image never takes more X% of the total height? Or would you have another suggestion?

Some examples below.

Screen resolution 2560 x 1080 MicrosoftTeams-image 2560 x 1080

Screen resolution 1920 x 1080 MicrosoftTeams-image 1920 x 1080

You can view this page here: https://www.ilo.org/resource/statement/ilo-director-general-reaffirms-importance-declaration-philadelphia-social

justintemps commented 3 months ago

Hey @inesdgomes I think this is a design question. If you want to give us some references (example, this is what it should look like on a 15" desktop screen) then we can figure out the percentages... cc @beatrizmartinmartins

beatrizmartinmartins commented 3 months ago

@justintemps on Figma we can't make percentages so it wouldn't look different on a 15" screen or a 27" for example, but we can have an equivalence between percentages and pixels and make a pixels version on Figma just so we can use them on templates, although on code it would be different. But I can make some examples on different screen sizes so you can set the percentages