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?
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
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
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