Need to make the text responsive
How do I make the image and text responsive to the image so that it is always on the strips
3 Replies
You have 't shared any code so it is impossible to know what you have already tried.
That said, my solution would be to have the stripes as backgrounds (color, images or gradients) to the texts. That way they would always be in the right place.
That said, my solution would be to have the stripes as backgrounds (color, images or gradients) to the texts. That way they would always be in the right place.
My advice is donβt use px for font size and donβt use width and height for image unless you using % or ems
And try to display the image as flex and do this:
Img{
Align-self: flex-start;
}
The flex will make the image responsive but the image will stretch so you fix it with this
And if anyone thinks there is a problem with this solution please let me know so I can correct my code
If the stripe is the background of the element that holds the text, the stripe will always stay with the text. However, it looks like you might also want to keep the the striped text in the yellow part of the wall. This requires setting the left margin of the striped text's container as a percentage of the size of the container that holds the background image. Resizing the viewport would then resize the background image's container, and that would resize the margin.