(HTML) Text in image if scaled to mobile size (Skeleton Framework)

Question

Im making my first portfolio website using the skeleton framework,

the website looks good on my screen (1920 1080) but if i try to scale it to a phone (nexus 5x) the text automatically goes into the image

Can someone explain it to me why the text goes into the image?

Here you have a screenshot of the problem: https://gyazo.com/8f7be918817a9c3580fcae51b72442b4

If you want to check out the website online:

https://test.luukkenselaar.nl/

Thanks!

Answer 1

The problem is with your html layout. Don't use <img> tag to set the image as background for division. Instead try to set the image as css background of any <div> and change the min-height of div with media queries to make it responsive.

For example:

.target-division {
background: url('../img/some_img.png');
background-repeat: no-repeat; 
min-height: 770px;
}

Change min-height according to your needs. Also you can remove this code:

.container {
    margin-top: 30%;
}

This should eliminate your current problem.