Image size on mobile

Hello everyone!
Faced a problem such as a size of images on mobile portrait view. I create portfolio web-site just by example from tutorial “Creating a custom portfolio” for practice as a beginer. I just check responsiveness in google (with developer tool) - all ok. But when I check on mobile ( iPhone 7). Images in one of section is streched up. I don’t know - why? Coz everything was done as mentor show. I’ve played with sizing of blocks ( use %, px) .But its showing same result.
Please give me advice,
Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/creating-custom-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=creating-custom-portfolio&preview=64f3f1ffaa89a036c7eafa575e6ede6e&mode=preview
(how to share your site Read-Only link)

I don’t own an iphone, but I checked the designer-view, Chrome desktop and Chrome android, all looks fine!

Can you post a screenshot?

Yes , I will drop image123

Does this only apply to Safari on ios?

yes, I’ve checked on SamsungS7. Image looks ok.

As there is no real way for me to debug this, have a go at different values, try setting pixel values instead of % on the mobile breakpoint and also try setting min-width values. Safari on mobile somehow interprets the css differently?!

So far can’t solve this issue. Trying to play with block sizing - still same issue

Really don’t know how to fix it

Just only one way I made is to set images fixed px (height & width) for all breakpoints (like this is working) and looks ok on iPhone

Try these setting for me please

Ok. I will try this one as well

I’ve tried this approach as well. Its working also. Thanks

But one more issue I’ve found on iPhone. Its contact form. When I press to spell text in form or to spell e-mail adress I not see black line (blinking line after text) On samsung its ok but iPhone again making some drama

Yeah, that’s a common thing.
Each browser has it’s own implementation on forms and how they behave. Luckily we are moving towards a more unified approach thanks to google getting closer to MS but apple is always the outlier…

I’m not sure if you can control the type indicator at all on forms :thinking:

I change BG color for forms to little bit grey - this line is white color. Is it any way to change color of this line to black?

Edit*
Please see the new topic you created, I posted links there that show how you can set the color of the line!

Thanks, I will check now. Coz I already find another issue

Neat :smile:




This site , I have made just for practice. I need to apply hosting plan to use custom code. I checked that to liks that you gave me. This site I will not use

Two links I mean, some spelling mistakes