fix: narrow screen, blog image must have max-width - Githubissues

TACC / tup-ui

React client for TACC User Portal

2 stars 0 forks source link

fix: narrow screen, blog image must have max-width #305

Closed wesleyboar closed 1 year ago

wesleyboar commented 1 year ago

Overview

Do not let blog images on narrow screen exceed width of page.

Important This change is applied to live site via snippet #136. Delete that snippet after this code is deployed.

Related

fixes bug caused by https://github.com/TACC/Core-CMS#588

Changes

changed one CSS value in a stylesheet _{This stylesheet will be used in TUP-463 to overwrite Core-CMS styles.}

Testing

Open https://www.tacc.utexas.edu/news/latest-news/2023/09/13/ecep-connect-virtual-summit/.
Confirm article image does not overflow page / cause scrollbar at any screen width, especially 767px or less.
For good measure, if news editor is not working ons tory, test when image has a caption. _{To add a caption, edit Image plugin under its "Advanced settings", and add text in "Caption" field.)}

UI

After (Narrow Screen) ✅

Left	Center	Right

Before (Narrow Screen) ❌

Left	Center	Right

Unchanged (Wide Screen)

Left	Center	Right

Notes

To overwrite broken code in Core-CMS django.cms.blog.app.page.css.

Core-CMS says max-width: unset, but should say max-width: 100%.

max-width: unset removes max width, thus image can overflow page
max-width: 100% limits width to parent, thus image not overflow page

wesleyboar commented 1 year ago

Approved by designer (TACC internal communication). One-line change. Merging.