I need to have a text banner over a photo. It’s looks fine until screen width 1127px. From 1126px - 767px, the banner starts shifting downward. Is there a way to stop this without creating a “@ media and screen” for every pixel size and shifting the banner up one for one?
Or another option is maybe the banner could be made another way. Is there a better way to do that?
Hi There,
Thank you for writing in, please turn off that ROW’s Marginless Column options.
And zero out the left padding of that 1/3 Column to make it closer to the 2/3 Column.
Hope it helps,
Cheers!
Unfortunately, this didn’t fix the issue. Could you please take a look. I have left the settings that you mentioned in place.
Hi There,
Thanks for writing in!
The easiest way to do this is to add a background image to the column.
Inside the column, you can use headline and text element for the text. Also, you can add margin padding to the element for the position.
Hope this helps!
Is there a way to do this without the image being cut off?
Hi There,
You can set your background size to 100% 100%, but that is not recommended because your background-image will look distorted in some screen-sizes.
Background-images is responsive in a different way, there is no real background-size value that will make the image fit-to-all-screen, without compromising the quality. Please read more about that here.
Cheers!
If that’s the case then this solution isn’t going to work. Do you know of another way to put a responsive banner over an image?
Hi There,
Your previous solution should have work, where you added the image as an Image element and respond to the size of the 2/3 column, then position: absolute; the text-block to put it on top of the image. To do that, add this on the Content Area element’s inline CSS field…
position: absolute;left: 0;right: 0;
Hope it helps,
Cheers!
It’s working now. Thanks!
You’re more than welcome, glad we could help.
Have a nice weekend, Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.