0

I am making a portfolio (github link) and facing the issue that the text goes out of image on mobile devices. Is there any way to keep it on image only on all devices? This is the div section in which I am facing problem. The hero text is going out of image. how can I keep it on image?

.hero-text {
  text-align: center;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.parallax {
    /* The image used */
    background-image: url("https://github.com/AakashSYadav/AakashSYadav.github.io/blob/master/aakash.jpg?raw=true");
    /* Set a specific height */
    min-height: 500px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<div class="parallax">
  <div class="hero-text">
    <h1 style="font-size:50px">I am Aakash Yadav</h1>
    <h2>I am a Bachelor of Technology (B.Tech), Sophomore Year, Mechanical Engineering undergraduate student at Indian Institute of Technology, Tirupati</h2>
  </div>
</div>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Anshul Yadav
  • 13
  • 2
  • 7
  • Possible duplicate of [hide div tag on mobile view only?](https://stackoverflow.com/questions/16550485/hide-div-tag-on-mobile-view-only) – caramba Jan 01 '18 at 09:11

1 Answers1

0

Since hero-text is inside parallax, and child div is absolute, add a position: relative to the parent div so child div is positioned relative to parent. Then top, left etc. are relative to parent div.

Also as I see you are positioning text at the bottom part of image position it with bottom rather than top in absolute positioning.

sarthak
  • 500
  • 9
  • 19
  • You can use flex and media query to get it working for every screen. Here's a demo https://codepen.io/sarthaku/pen/YYQPWz – sarthak Jan 01 '18 at 12:17