This is a follow up of this issue: #1322794: Make Stark use a responsive layout

During testing with Images I found an issue, that the Drupal default Imagecache preset "Large", which is used to show an image in an Article Node, is too wide to be shown in narrow and mobile layout. This could add a horizontal scrollbar on smartphones which is not the idea of a responsive design.

The attached patch just changes the max-width of all images too 100% which then automatically resizes images depending of the available space.

CommentFileSizeAuthor
#9 images_fluid-1490468-9.patch443 bytesSchnitzel
#1 images_100-1490468-1.patch441 bytesSchnitzel
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Schnitzel’s picture

Schnitzel CreditAttribution: Schnitzel commented
FileSize
images_100-1490468-1.patch441 bytes

Status: Needs review » Needs work

The last submitted patch, images_100-1490468-1.patch, failed testing.

Snugug’s picture

Snugug CreditAttribution: Snugug commented

You also are going to need to set height to auto in order to ensure that the height scales correctly as well

Schnitzel’s picture

Schnitzel CreditAttribution: Schnitzel commented

need to set height to auto

well that's in the patch but I just did not write it because the 100% width is more important ;)

Patch failed because the former patch is actually not yet in, it would probably also fail if I do it for the right paths. Let's wait until #1322794: Make Stark use a responsive layout is in.

alanburke’s picture

alanburke CreditAttribution: alanburke commented
Status: Needs work » Needs review

#1: images_100-1490468-1.patch queued for re-testing.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Status: Needs review » Needs work 
+img {
+  max-width:100%;
+  height:auto;
+}

Our coding standards (rough as they are) use a space after the semicolon. Like this: property: value

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Title: Set width of Images to 100% to ensure that images look nice with responsive Design » Allow images to scale with fluid layouts in responsive designs

Once all our themes are converted to be responsive, we should move this to a system CSS file. But that would break Bartik and Seven in the interim. We'll need to create a follow-up issue for that.

Tor Arne Thune’s picture

Tor Arne Thune CreditAttribution: Tor Arne Thune commented 
+++ b/core/themes/stark/css/layout.cssundefined
@@ -20,6 +20,11 @@
+img {
+  max-width:100%;
+  height:auto;
+}

And also the properties should be in alphabetical order. Drupal CSS coding standards.

Schnitzel’s picture

Schnitzel CreditAttribution: Schnitzel commented
Status: Needs work » Needs review
FileSize
images_fluid-1490468-9.patch443 bytes

thx for your reviews, here a fixxed version:
- new order
- added space

dcmouyard’s picture

dcmouyard CreditAttribution: dcmouyard commented
Status: Needs review » Reviewed & tested by the community

The patch in #9 looks good to me.

Tor Arne Thune’s picture

Tor Arne Thune CreditAttribution: Tor Arne Thune commented

Yes, looks good!

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented
Status: Reviewed & tested by the community » Fixed

Looks good. Committed/pushed to 8.x.

Automatically closed -- issue fixed for 2 weeks with no activity.