Mobile view of blogs

[fhobswid]

An issue has been reported by the team: The mobile view of individual blog entries looks strange (please see received image below). I have some suggestions to improve this:

• Make image full width on mobile (small screens)
• Start title on new line, underneath or above featured image
• Ensure no line breaks can occur within title words

Thank you!

Image from iOS

[mcresilkstart]

Hi Francesca - I see the problem. Let me see what is the easiest way to fix it from those options.

Regards

Michael

Michael Creswell - Sales Director SilkStart UK T: +44 (0) 207 101 4370 M: +44 (0) 7973 818 947 E: @.*** W: www.silkstart.co.uk

On Tue, 4 Jan 2022 at 13:32, fhobswid @.***> wrote:

An issue has been reported by the team: The mobile view of individual blog entries looks strange. I have some suggestions to improve this:

• Make image full width on mobile (small screens)
• Start title on new line, underneath or above featured image
• Ensure no line breaks can occur within title words

Thank you!

Image from iOS https://user-images.githubusercontent.com/88625230/148066504-2ea79bf2-e406-4f7b-9f81-1f3cefa26221.jpg

— Reply to this email directly, view it on GitHub https://github.com/wid-tech/website/issues/80, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVHFQQ6BKX3IIXZPKMYJFLTUULZG7ANCNFSM5LHOUPIA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were assigned.Message ID: @.***>

[mcresilkstart]

@fhobswid I have added some CSS in the APEX to fix this by making the image full screen on a mobile device. Please check and see if now all good and close this issue if it is.

[fhobswid]

Thanks @mcresilkstart - I think that layout is better. The image does look stretched though in this view and therefore blurry (e.g. https://www.womeninidentity.org/articles/building-a-code-of-conduct-for-greater-inclusion-in-identity-and-financial-systems), unlike the overall Articles archive which must present the image a higher resolution in this layout (https://www.womeninidentity.org/articles/category/blog)

[mcresilkstart]

@fhobswid well yes it will look more blurry as it is now scaling up the image to fit the full width of the mobile device so the headline is pushed below it. It might better if the uploaded image had a higher resolution?? The other option is to not display the image when on a mobile device. Let me know if you want me to change it to this

[fhobswid]

I don't think a higher resolution would fix it unfortunately, as it's the same across all of the articles. I think it's to do with the resolution that the images are being displayed at rather than as they're uploaded, given that this isn't an issue with the overall archive (list of articles) view. I'd also prefer to keep the images in mobile view, as these are important for e.g. the member interviews.

[mcresilkstart]

@fhobswid so leave it as is then?

[fhobswid]

I'm not sure which is better - blurry image or disjointed title. Could it be logged as a bug with the tech team, with the initial suggestions for fixing it?

[mcresilkstart]

Sure - I will see if my web developer can come up with something better.

[fhobswid]

Thanks!

[mcresilkstart]

@fhobswid I got the image on the mobile back to its original size with the header text below it. Can you check it now please and if ok close this ticket?

[fhobswid]

That's great, thanks @mcresilkstart!