Archived topic
Responsive for Banner image
11 replies · Started by Punit Dhawan on June 18, 2020
Hello,
I bought generatepress few days ago and i want to fix my banner to the responsive one. Please have a look to the banner of my website i want to make it responsive for mobile as currently it is not - https://prnt.sc/t25mh1
Also I have a bloig section over here - https://prnt.sc/t25oo6 i want to add scroller like this https://prnt.sc/t25p4x so that all of my blogs i can see here with Excerpt (approx 50 to 80 words) of a blog
Warmest Regards,
Punit
Hi there,
Are you referring to this image here?
https://www.screencast.com/t/VeyVrN2V
If so it's using a background image which isn't responsive by nature - it's not a theme thing.
Hey Leo,
Thanks for getting back to me. Yes i was talking about this image only. So is there anyway i can put a responsive banner here using any other option with the text overlap on it like this?
Also, you didn't reply to my other query, please reply.
Warmest Regards,
Punit Dhawan
The only way to keep the whole thing responsive is to add the text to the image itself and upload it as a static image.
Let's get the first issue resolved so you can open a new topic for another question:
https://www.screencast.com/t/8UT050fC4dVB
Thanks!
Okay, so is there any other layout you have in site labrary which can actually work like this??
Banner and text overlap on it like this i have shown you?
Background images method is required in order to have text overlay on image unless you use the method I specified here:
https://generatepress.com/forums/topic/responsive-for-banner-image/#post-1333139
You can also use a page hero to create something like that but might still run into the same issue:
https://docs.generatepress.com/article/header-element-overview/
But the advantage of using a header element would be that you can adjust the desktop and mobile padding separately:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height
Got it.
Is that possible if i can use the same thing https://www.screencast.com/t/VeyVrN2V for desktop & tablet but different smaller image here for mobile. If yes then how can i do so?
Warmest Regards,
Punit Dhawan
You definitely could.
Any reason why you are using a cover block inside of a container block?
You can achieve the exact same thing with the container block and it would be easier to switch out the image.
Let me know :)
I was not aware, will do so..
Please tell me how can i use the different banner for mobile and for desktop as asked above.
Thanks
Hi there,
if the banners are significantly different then the easiest method is to create a 2 x Banners - one for Desktop and one for mobile.
Then add the relevant hide-on- classes in the container blocks > advanced > additional CSS field:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Thank you.
You're welcome
