Revise mobile designs for detail cards

[inesdgomes]

The detail cards seem to need some improvements on mobile. If the image that goes with the card is a portrait image, the design is ok-ish; but if the image is landscape, it looks too small.

Mobile designs for detail cards can be seen in the Portal No Nav templates: https://www.figma.com/file/TnVsWy6VobbHzZdbHdx3Rb/ILO-Page-Templates?type=design&node-id=407-32195&mode=design&t=gyprGodSTmKXE3iT-0

Some screenshots of how this is looking in the website:

TABLET

MOBILE

And you can test it on your mobile phone here: https://iloorgstg.prod.acquia-sites.com/node/401

[beatrizmartinmartins]

I think the best option is to create a Tablet version where the photo is a bit bigger on that specific breakpoint. I actually did it on the component You can check the template here as well. We can change the measurements to something bigger if we want. Let me know what you think @inesdgomes

[inesdgomes]

@beatrizmartinmartins I think the problem on mobile remains as the photo is still too small, but not sure whether increasing it will make the text next to it too narrow and difficult to read. Or would it make sense to just move the photo to above the text? The down side is that this will be used for very long lists (e.g. search results), so it may make browsing more difficult. Thoughts?

[beatrizmartinmartins]

@inesdgomes I also thought about the idea of placing the image at the top but as you said, this can make the user scroll much more because of the image sizing. If we have a thousand cards, this would make the user experience very painful for the user. I think we can either leave the image as it is, or remove it completely, but I feel like this second option will make detail cards look the same without any distinguishment between one or another. Shall we leave it as it is?

[beatrizmartinmartins]

@inesdgomes changed it per what we talked about. Although it seemed like a good idea, now I feel like the big images (the ones with a big height) look kind of weird. It's just way too big in height. See here

[inesdgomes]

Thanks @beatrizmartinmartins What if we reduce the size of the image as in the example you sent me?

[beatrizmartinmartins]

I just changed to the example Check here

[inesdgomes]

Hi @justintemps This is something we can move to development: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=8252-13959&t=mFIxtDSEdwF73s6J-0

The changes to the detail cards are:

• On mobile and table breakpoints, image size is now bigger
• On mobile, the image moves to the top of the card