Images Showing up as Tiny in various Browsers & Viewports

Community resources Bugs
1

I’ve encountered a strange and confusing problem with a specific set of images being pulled in from a CMS Collection showing up in Desktop view as very small.

2804×1548 523 KB

The Image sits within an unclassed LinkBlock, which inturn sits in the left column of a 2 column “Row”, Set up as a Flex box so that it can move from horizontal arrangement to vertical when we go down to tablet and Mobile widths. This was working fine, Styled for all 4 viewports just perfectly, and then all of a sudden, it wasn’t. For further context, it was originally designed in Chrome, but malfunctioning on the published site viewing in Safari (like so many other things with Webflow in Safari).

Experimenting a bit with Width (Min and Max settings), both as a percentage value and set pixel length, got the pic to appear in full size again, though the alignment of the Photo was suddenly affected.

Further confounding this problem, after following the forum advice to redo things while logged in to the designer in Safari, at the Tablet viewport width, the image suddenly shrinks again, and this time while in Chrome. Maddening.

900×879 443 KB

So, in short: Pulling images from CMS into a Dynamic Column Flexbox results in unpredictable and unreliable image size rendering (note the size below cut from the inspector readout of the image:
(max-width: 479px) 6px, (max-width: 991px) 1vw, 600px)

<img class="musician-image" sizes="(max-width: 479px) 6px, (max-width: 991px) 1vw, 600px" src="https://daks2k3a4ib2z.cloudfront.net/585c6c19c5971c6c629dfaea/58827f56f3af82db1843aff7_DearBeloveds_Promopic.jpg" srcset="https://daks2k3a4ib2z.cloudfront.net/585c6c19c5971c6c629dfaea/58827f56f3af82db1843aff7_DearBeloveds_Promopic-p-500x336.jpeg 500w, https://daks2k3a4ib2z.cloudfront.net/585c6c19c5971c6c629dfaea/58827f56f3af82db1843aff7_DearBeloveds_Promopic-p-800x537.jpeg 800w, https://daks2k3a4ib2z.cloudfront.net/585c6c19c5971c6c629dfaea/58827f56f3af82db1843aff7_DearBeloveds_Promopic.jpg 853w">

Anyone know what might be going on? Any help with this matter would be greatly appreciated. Below are the links:

Preview: https://preview.webflow.com/preview/soulplay?preview=4d2d970b11d3cf1bc817ca0fc546c0c2

Published site: soulplay.com/experience/music

Mahalo!

  • Derek

@waldo @PixelGeek @cyberdave @samliew

2

Probably being caused by responsive images (rough guess). Quick fix.

Code in head area;

* > img {
   width: 100%;
}

What this does is to always ensure that any image nested inside any container will always take 100% width of that container.

Important: Do not apply styles on the image itself but rather on the image container.

3

Hi @Derek_vdS thanks for reaching out!

It looks like you may have already pushed a fix, something I noticed was that your musician images were displaying as stretched out in Chrome so I changed the Flex Child settings to align self:

1556×1126 1.05 MB

Did you make any other changes to the images? It sounds like the responsive image variant was not loading in correctly.

Other than that everything looks be loading as expected per the current style settings here: http://soulplay.webflow.io/experience/music

4

Hi @AlexManyeki!

Thanks for jumping in quickly to take a look and offer help! I appreciate you!

The problem wasn’t resolved with your proposed fix, but I did give it a try.

Turns out, and here’s where I do get confused, that the issue was within the Settings panel for the image block, with the Image Property/Dimensions being left unspecified, or on “auto”. Changing this value, Seemingly to an individual element, to a specific width of 550 px resolved the issue. I’ll share more below in my reply to Waldo.

But thanks again! It was heartening to get a reply while in the QA trenches.

Sincerely,

  • Derek
5

hi @Waldo,

Thank you, too, for jumping in here to help. I did figure out the pivotal change needed… though I’m confused as to why this value change fixed the issue. Which leads me to a few questions

My understanding is that configurations within the Settings panel affects the selected element in question only, not all elements that happen to share the same class. This has been my experience, and makes logical sense, as you wouldn’t want a change to a link or a conditional visibility matter or, in this case, and image size, to inadvertently change all other elements sharing the same class. Is this the truth in fact in every case?

If so, I’m left wondering why changing the width value from “auto” to a set pixel length (550 px, but any size would have resolved the matter), caused the other images in the page to also resolve and display correctly. My understanding is that this value sets an initial base dimension for an image, which can then be over-ridden by CSS styles applied to the element, per screen size. Am I correct in this understanding?

Please advise!

Appreciatively,

  • Derek
6

Hi @Derek_vdS excellent question! My pleasure to help in any way possible.

Yes the CSS would over-ride the width you set on an inline image property setting. Keep in mind that since the image is inside of a dynamic list, when you add that image width setting within the settings tab, you’re applying that width setting to all of your images in the dynamic list.

To help me further investigate (thank you again so much for your help) do you recall what setting you had on the image beforehand that was causing it to render so small and what change exactly that you made to resolve the rendering issue?

I’m trying to reproduce the behavior on this end to see if it was a bug or an issue with a certain style or style conflict instead.

Thanks in advance! :bow:

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.