Can't get text to stay fixed over image

**My text is great until it’s scaled down small and then it travels off to the left hand side of the screen. I’ve tried several different things but I can’t seem to get it to stay fixed over the image and scale down responsively at the same time. **

HTML

artistic image of young Hopper

"The most dangerous phrase
in our language is:
We've always done it that way."
-Hopper

CSS

.container {
position: relative;
text-align: center;
color: black;
font-size: 12px;
}

/* Quote */
h2 {
position: absolute;
top: 100px;
right: 200px;
width: 100%;
}

To be clear my text actually sits over top of the image, in the empty space to the left of Hoppers face; not underneath it as it’s showing here for some reason.

Could you put your code in codepen? that’s easier for us233

1 Like

I’m still messing around trying to get it to work so I’m now trying the media querys to no avail.

Rather than using pixels for your text placement, try using percentages. Say, 30% from the left side of the viewport, for example.

1 Like
.container {
position: relative;
text-align: center;
color: black;
font-size: 12px;

}

/* Quote */
h2 {
  z-index: 2;
position: absolute;
top: 100px;
right: 200px;
width: 100%;
display: block;
margin: auto;
}
img {
  display: block;
  
}
  1. you can use percentages.
  2. just set it block, or img to background. and set the max-width
    I forgot how to set percentages already lol…
1 Like

Thanks! I’m going to go try this.

Thanks this did it for me! Now I just have to style it how I want and I’m golden.


I tried to put it in the middle, but it looks so bad in the middle lol
btw:
your html code it’s quit messy,
also I recommend use less or sass to rewrite your css, that’s a better way to write css.
of cause have better way to write html too,
the only thing u have to do it’s rewrite it in them.

1 Like

Just be careful with this type of advice, as it’s important to bear in mind where people are at with their learning. If someone is on these challenges (ie the first part of the FCC curriculum) then they won’t have encountered SASS yet.

You can pass these challenges without SASS and SASS hasn’t been mentioned or taught on the curriculum at all yet, so telling someone they should use it is at best only going to confuse someone and at worst will see them waste valuable learning hours on something they don’t need to get through the curriculum.

I think it’s important to mention because, as someone who has recently finished that part of CSS, it would have confused me massively.

1 Like