Container shrinks in mobile screen
So my container shrinks quite a bit on small mobile screens, and the content inside it fades with it.
I suspect it comes from the
overflow: hidden property set on the .container class. Another problem which then arises is that there is no border-radius on the image. Or I suppose a more accurate statement would be is the image is "above" the container's border.
Any help to understand how the problem occurred and a fix to it would be highly appreciated; thanks!
JSFiddle: https://jsfiddle.net/qbykormu/3/Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
4 Replies
Quick video clips:
WITH
overflow: hidden;
Here, the borders are nicely roundedWITHOUT
overflow: hidden; You can see the border-radius does not apply to the image270px is like the smallest mobile viewport so to that point everything looks fine even with overflow hidden
if you don't want to use overflow hidden add the border-radius on img tag
Oh wow, that worked haha. Just a
border-radius on the <img> fixed it. I overthought that big time 😅