-2

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!

Luuk Kenselaar
  • 161
  • 1
  • 7

1 Answers1

0

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.

Ankit Yadav
  • 1
  • 2