Scaling Poster Image?

[lorax]

I have a prominent background video in my X theme. I took a frame from the video to use for the Poster Image but when viewed on a mobile device it’s too big for the screen. Can I make it scale with the size of the viewport?

http://kingdomofuisneach.com/

[lely]

Hi There,

Unfortunately, I am not seeing any image when I check the top part of your homepage on mobile device. Can you give us us screenshot of your settings and URL of the image? This is so we can compare it to what’s on the source code. If you can also give us credentials on secure note, that would be better. Thank you.

[lorax]

Hello @Lely, Oops! I had removed the poster image while trying different things and forgot to put it back in. The one I added is approx 200 x 200 px. I had used one at the video’s original dimensions of 1280 x 720. They both display exactly the same way. I’ll look for how to send you a secure note shortly.

[nabeel]

Hi again,

You can try two options to scale the poster image:

.poster {
  background-size: contain !important;
}

.poster {
  background-size: 100% 100% !important
}

Use that fits your need. Hope this helps!

[lorax]

1 worked enough that I can see the image and it fits width but it leaves a large gap above and below the image. I tried the second option but it stretches the image vertically. So now if we can get rid of the gaps.

Also, how would I get the text to scale?

[nabeel]

Hi again,

Regretfully there is no way to remove the gaps with the first option. This is the default behavior of background-size: contain; property. Here is what it does to the background image:

“contain property tells the browser to always show the whole image, even if that leaves a little space to the sides or bottom.”

To read more about this property see https://css-tricks.com/almanac/properties/b/background-size/

Regarding your other query, which text you want to resize? Is it the text that says “She must begin the journey…” to resize the above text, you can make use if the following code:

@media srceen and (max-width: 480px) {
  .el12 h1.x-text-content-text-primary {
    font-size: 30px !important;
  }
}

To find out more regarding media queries please see https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Hope this helps!

[lorax]

Thanks for the answers. I’ll play around with it and see what I can do.

G

[Joao]

Let us know how it goes.

[lorax]

I had an epiphany. I should have realized this earlier but here’s how I resolved the issue and avoided the dangers of customizing CSS.

I duplicated each section. I hid the original for mobile devices. Then I hid the duplicates for larger screens. Then I went ahead and customized the mobile versions to make them look the way I wanted on mobile screens.

[rad]

Hi there,

Yes, it’s another way and more recommended since it’s a built-in feature.

Thanks for sharing!