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.
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.
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.
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!
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.
thank you! It worked perfectly! that’s the next puzzle I have been trying to solve.