My text is on top of my image when resizing my screen to mobile version

My text is on top of my image when resizing my screen to mobile version
0.0 0

#1

when I resize the resolution of my screen to xs (mobile size) my

text is on top of my image. I can’t seem to get it to resize properly. I’m still early in my learning so my code may be messy. Sorry.


#2

try this
.header {
min-height:200px;
background-color: powderblue;
border: 2px solid black;
border-radius: 15px 50px;
padding: 15px;
}

I use your sample and build a bit different. http://codepen.io/bunly/pen/bBBGjK?editors=1100

Hope it will help.


#3

So incredibly helpful! I have learned a lot from this challenge. I’ve had to do a lot of reading on the side and research. I was really stuck. Thank you!


#4

You have made your img size larger than the bootstrap columns and it is “popping” out.
In addition to @bun-enoikio code add this
img{
height: auto;
max-height: 250px;
width: auto;
max-width: 100%;
}

Also if things start bumping into each other, add
border: solid 1px red;
to the elements to see how it fits together.


#5

thank you! It worked perfectly! that’s the next puzzle I have been trying to solve.