- This topic has 5 replies, 2 voices, and was last updated 4 years, 11 months ago by
.
-
Posts
-
Hi team,
Sorry to ask this, but against my strong advice, now and again my client wants to put up ugly banners with text in the image.
Now I know how bad this is on every possible level, but they really want to do this.I have added their image and as you will see, when you change the screen size, the text vanishes and the banner does not respond well at all.
How do I make the header element simply shrink the image so it always looks the same, regardless and text is always visible?
Its the home page banner, you wont miss it!.Customer Support
Hi there,
Is there any chance you can separate the text on the background image?
So we could at least make the font inside it responsive.
If not, you’ll have to assign different padding values for desktop and mobile. You can do this within the Header element. You should see a desktop and mobile icon side by side on the left side of the padding fields. https://docs.generatepress.com/article/header-element-overview/#page-hero
Or do it manually with
.page-heroselector.Example:
@media(max-width:768px){ .page-hero{ padding-top: 100px; padding-bottom: 100px } } @media(min-width:769px){ .page-hero{ padding-top: 250px; padding-bottom: 250px } }You can do other things with this if you’re familiar w/ background properties of CSS. 🙂
Hey Elvin
No, I cant seperate the text as they just want to throw a big banner image up with all their text included in the image.
I tried you above advice but it doesn’t seem to make the banner responsive, no matter how I set the padding.So, I’ve added ‘Smart Slider 3’ instead? and I can switch to a second header element that uses smart header instead of my default layout. It looks awful, but its what the customer wants and the customer is always right.
Thanks anyway.
Do you have any mockup of how you want it to look on desktop and on mobile?
So I have a clear idea of the layout goal to have in mind if it comes to doing this completely on custom CSS.
I don’t think it matters if there’s a slider or not. The issue is the background image being used as the banner. Having text on a background is generally a bad practice especially in this case because you have a button element with it.
But since nothing can be done w/ it, the way to go is to adjust its “view” with min-height and/or paddings on different viewports.
Hey Elvin,
All good mate. I know it is bad practice and I’m only doing this because my client is insisting on adding these hideous banners.
So I’ve added Smart Slider 3 and while it looks terrible, it is exactly what my client wants. I’ve told them it looks dreadful and is wrong on every level, but they are happy!Thanks anyway.
Nice one. Glad you got it sorted. 🙂
- You must be logged in to reply to this topic.
