Screen shot from an iPhone 14 Pro Max vertical view. (Same if horizontal view)
Note tiny speck that is an image should be full container width.
At random times images show as specs in Design view (random resolutions) also.
Sometimes refreshing the browser page clears the issue but not always.
test giving the image a 100% width
I also recommend removing the “max width = 100%” for “all images” selector. Right now, the widest your image will enlarge is 974px.
Been there - Done that.
I’ve tried every combination of containers, divs, h flex and every size setting I can imagine.
Sure it cures the issue for a while then randomly IT RETURNS.
In the past 2 days this little test site is only one of over a dozen that I have tried every container and setting there is and every size setting there is.
try changing Flex Block to width = 940 (while keeping the settings I suggested above)
Using a different authoring tool.
Sad that Adobe stopped supporting Muse 5 years ago. It still works perfectly !
I’d say test out the last suggestion I made since your image’s parent container also doesn’t have a width assigned.
This is just nuts!
I started fresh with a blank Body.
added a Container which centers itself and has a max W to 940px.
set that container to flex vertical with Align to top and Justify to center
Added two images vertically
ran thru the design sizes and all was fine
Design view starting screen size and checked the smaller sizes and all was fine
back to Design without changing a thing the images were reduced to 36px in all but the screen size.
refreshed the browser page and all is fine. Images show ok in all views.
Published and the images show as tiny icons when viewed on iPhone and/or iPad
Back to design view and guess what? . . . phone H and phone V show little icons.
All the above done with out making a single change to layout or size.
Just switching from view sizes or to design view or publishing screws the simplest site to a mess
Gonna make it even simpler. gonna start with a blank body, add a container, add ONE image and my bet is when switching from size view in designer a few times and soon the image will be an icon in the smaller sizes.
Then I’ll try a single column grid for kicks. History tells me the issue will remain.
30 + years of software, apps and sites testing (including 100s of usability tests on sites)tells me this problem is NOT on my end. The code bits getting rearranged while being sent back and forth when using web access software opposed to local install software.
The problem seems to be with responsive images.
Another recent post from a few days ago showed a similar issue, and when I look at the generated HTML in that example I’m seeing an image size of 1vw.
You could try regenerating your responsive images with CTRL+SHIFT+I
Or disable the worst offenders.
I’m curious, are you also using vw metrics in your site design for the image sizing? Could be a problem related to how that’s calculated by Webflows responsive image measuring subsystem.
