0

I'm stuck with adjusting the height of my block in relation to the amount of text inside it. On desktops it works fine, but on my iPhone the text goes over the div with the violet background.

The screenshot has been made on iPhone 5S, iOS 11.0

Life demo: https://www.ruslanchik.ru/en/. To reproduce the problem, you may use your mobile device.

  

 .section-with-personal-photo {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background-image: linear-gradient(126deg, rgb(92, 52, 116)40%, rgb(142, 102, 206)100%)
}

.section-with-personal-photo-image {
    padding: 0;
    display: block;
    float: left;
    clear: left;
    content: url("//res.cloudinary.com/ruslanchik/image/upload/c_scale,h_360/v1525190031/ruslanchik.ru/i/avatars/LinkedIn-photo-shooting-session-05.04.2018.png")
}

.section-with-personal-photo-text {
    height: 100%;
    max-width: 68%;
    float: right;
    color: #ffffff
}
<div class=section-with-personal-photo>
  <div class=section-with-personal-photo-image></div>
  <div class=section-with-personal-photo-text>
    <h3 id=resume>CV</h3>
    <p>I will tailor it to your specific vacancy and do a keyword opimisation.</p>
    <ul class=dotted-list>
      <li><a href=//www.ruslanchik.ru/en/cv/professional/ title="Ruslan Seletskiy's Professional CV" target=_blank>Professional CV</a></li>
      <li><a href=//www.ruslanchik.ru/en/cv/academic/ title="Ruslan Seletskiy's Academic CV" target=_blank>Academic CV</a> <span> featuring with a long appendix</span></li>
    </ul>
    <p id=make-an-offer>Let me know about some opportunities available at your organisation:
      <ul class=dotted-list>
        <li><a href="mailto:ruslanchik@ruslanchik.ru?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslanchik@ruslanchik.ru">ruslanchik@ruslanchik.ru</a></li>
        <li><a href="mailto:ruslan.seletskiy@gmail.com?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslan.seletskiy@gmail.com">ruslan.seletskiy@gmail.com</a> <span> if you think my domain email is unprofessional</span></li>
      </ul>
  </div>
</div>

I've checked various posts on Stackoverflow, but solutions from many of them didn't work. For all the rest, solutions (e.g. how do I give a div a responsive height) made the layout even worse.

Any relevant help is highly appreciated.

aroabarberan
  • 157
  • 1
  • 2
  • 10
Ruslan Seletskiy
  • 309
  • 3
  • 14

3 Answers3

0

That's good you posted the live example, this issue is also replicated with Chrome browser, so I tried it and I found a solution but I recommend you to adjust font-size for small devices too, but anyway look at it and consider if it's okay for you:

1) Set the overflow: auto to this element:

 #section-with-personal-photo

2) Set the width: 32% to this element:

#section-with-personal-photo-image

When you are the view, you can see that the parent element is growing up and all content isn't overflowing.

But also there is a better solution for this case, but I hope this helps you to figure out this overflow issue.

Martin Kolář
  • 69
  • 7
0

You can also remove float and max-width from your 'section-with-personal-photo-text' class.

Then add 32% padding to your 'section-with-personal-photo'. This results in the div expanding like so:

enter image description here

note (the image you have doesn't appear because the cloudinary domain is blocked on my network for some reason but, it should still work)

Michael Sorensen
  • 1,850
  • 12
  • 20
  • Okay, but how to make the image sticked to the bottom of the div? So it won't be in the centre of a height dimension. – Ruslan Seletskiy May 01 '18 at 22:25
  • I just got to a different network so now I see what you're talking about. To answer your question you can add position: relative to 'section-with-personal-photo' and then add position: absolute and bottom: 0 to 'section-with-personal-photo-image' I'll also update the picture on my answer – Michael Sorensen May 02 '18 at 01:50
  • Thank you so much for your support. Wish you a productive Wednesday. – Ruslan Seletskiy May 02 '18 at 08:26
0

Try setting height: auto; not height:100%:.

ArabianMaiden
  • 505
  • 7
  • 24