Responsive background Image and text overlay

[Dan1el]

Hey,

I have a slight issue and not sure of the best way to overcome it! Currently, I use Slider Revolution to display a simple header image and text overlay for my service pages, as well as other pages, however, I would like to remove the plugin and have an image (guessing background image would be best) with some text overlay to do the job and massively reduce my page load speed.

I have been able to build this with no issues and it looks great on desktop, however, when viewed on smaller screens the background image is not responsive, nither is my headline, I have played and tweaked with as many options and settings as I can think off but with no real progress!

Would you be so kind as to advise me on how I can get the header image to be responsive as it was when using the Slider Revolution plugin?!?

Many thanks
Daniel

[friech]

Hi Daniel,

Thank you for writing in, I see that you applied a min-height 660px to your column, that is not responsive, please replace that value somewhere 35vw

Then add this to your Headline’s Element CSS area to make it responsive.

@media (max-width: 767px) {
	$el.x-text {
	    font-size: 0.8em;
	    padding-right: 4%;
	}
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[Dan1el]

You guys rock! Thank you so much, support is awesome, really appreciate it.

[jade]

Thank you for the kind words, Daniel.