I have problem with image position in Safari browser on iPhone(Retina display). As you may see when site is in mobile version I change flex-direction
from row
to column
and image size as it was ignored. It's overlapping the div.text
EDIT: Solved:
I just removed flex: 0 0 20%
from .avatar-wrap
line and everything works.
HTML:
<div class="reference">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
<div class="avatar-wrap">
<img src="./assets/img/avatar.png" class="avatar">
<div>
John Doe <br>CEO at <a href="johncompany.com">johncompany.com</a>
</div>
</div>
</div
and CSS:
div.reference
width: 90%
display: flex
align-items: center
color: gray
margin-top: 20px
@media screen and (max-width: 1240px)
flex-direction: column
width: 100%
font-size: .9em
p
padding: 20px
&:before
content: '“'
&:after
content: '”'
.avatar-wrap
flex: 0 0 20%
display: flex
flex-direction: column
justify-content: center
align-items: center
div
margin-top: 15px
text-align: center
a
color: black
.avatar
max-height: 256px
Solved: I just removed
flex: 0 0 20%
from.avatar-wrap
line and everything works.