background image not responsive

Hi @jacksonpcy

Thanks for your support, it’s most appreciated.

Do you perhaps have a URL I could check to see the problem?

Yes.
https://www.thewandervaleec.sg

Appreciate much ??

Thanks for reaching out. Unfortunately, you’re using Ultra by Themify. Apologies for the confusion. This is a forum for the www.remarpro.com theme Ultra by Puro. For help with this request, please, reach out to Themify support:

https://themify.me/forum

I’m sure they’ll be able to assist.

All the best with your site.

Hello,
I don’t know if this will help you are not, but it is worth a try.
CSS Code:

.themify_builder .text-6-0-0-1.module-text {
width: 100%;
}

Thanks.

@andrew Misplon
I understand.

@tech55541
Thank you so much for the kind assistance. I have added the CSS code, it’s not responsive.
Appreciate if you could help me further

Hello,
The site looks fine on my IPhone. Check the screenshot.
https://postimg.org/image/e1fdtqydl/

Thanks.

Thanks @ tech55541

The wording is responsive but the background image is not.
Which is the problem i am facing. All my background images are not responsive in this theme. Thus seeking for some expert help here.
i really really appreciate your kind help!

OK, I understand now. I cannot help you here. Maybe someone else can.

Hi again ?? Since @tech55541 jumped, let me try assist.

Your theme is already using background-size: cover for this image so it’s not entirely unresponsive. We can change that to background-size: 100%. The problem with that is that we’d need to massive adjust the text size too because once we make the background image full responsive, it becomes really small on mobile so the text needs to follow. If this is the effect you want then you might try using a plugin like Meta Slider for this row. You could create a single slide slider. It handles this level of responsive behaviour really well. Unfortunately, layering is only in the premium version. Master Slider however has layering in the free version.

To see what I’m on about, add the following to your Custom CSS:

1.

.themify_builder_6_row.module_row_0.module_row {
    background-size: 100% !important;
}

But now the background image is repeating so what we really need is:

2.

.themify_builder_6_row.module_row_0.module_row {
    background-size: 100% !important;
    background-repeat: no-repeat;
}

But now the background image doesn’t cover the entire container anymore. If we want to go back to background-size: cover we’d just remove the Custom CSS becuase the theme is already using cover.

You could resize everything as the resolution changes, text, container height, background image, but, unfortunately, that’s a lot more than we’re able to cover here.

Hopefully this helps your understanding of what’s happening here.

Hi!

I have the same problem than @jacksonpcy. I am wondering what was the final solution?

Thanks!

Hi @elsihartikka

Thanks for posting. If you’re using Ultra by Themify then the best place to get support would be their forum: https://themify.me/forum.

Alternatively, if you’re using Ultra by Puro, please, send a link to a page showing the problem and I’ll take a look ??