Slider Video & Image Header Max width to screen

HI

Thanks for contacting us.

Lets take them one by one.

To fix the slider section video responsiveness issue, follow the below instructions.

Go to appearance >> customizer >> find the additional css box and the below css code inside the additional css box.

.video-slider.hero-section iframe{
???width: 100% !important;
????max-height: 100vh !important;
????object-fit: cover !important;
margin:unset !important;
}

Let me know if you have any confusion.

Thanks&Regards

SpiceThemes Support Team

This is fantastic – thank you! It’s working great. Only issue is when viewing on a phone, the video portion of the youtube frame has a dark margin on top and bottom of the video.. maybe because the height is set? Is there a way I can bring the video up higher so it looks like it fits better?

I tried to apply the same settings for the header images, but no luck ??

Appreciate you!

Hi @wbjtk

I hope this message finds you well.

To make the video section completely responsive across all devices, in both portrait and landscape modes, please follow the instructions below:

1. Remove the previous CSS code related to the video section.
2. Add the following CSS code inside the Additional CSS box:

.video-slider.hero-section { height: 850px; overflow: hidden; }
.video-slider.hero-section iframe { width: 100% !important; max-height: 100% !important; object-fit: cover !important; margin:unset !important; }
@media(max-width:1024px){ .video-slider.hero-section { height: 600px; } }
@media(max-width:768px){ .video-slider.hero-section { height: 500px; } }
@media(max-width:500px){ .video-slider.hero-section { height: 400px; } }

This code will ensure that the video section is fully responsive and maintains the correct aspect ratio regardless of device orientation.

Once the video responsiveness issue in the slider section is resolved, I will provide the necessary CSS code to address the header image.

Please let me know if you need any further assistance.

Best regards

Honeypress Support Team

• This reply was modified 4 months, 1 week ago by Akhilesh.

Incredible – this is the fix! Thank you for offering to help with the header image. I am ready!

Hi

To making header image add the below css code inside the Additional css box.

@media (max-width: 767px){
body .page-title-section {
????height: auto !important;
????background-size: contain !important;
????background-repeat: no-repeat !important;
padding: 80px 0
}}
@media (min-width: 768px) and (max-width: 1100px){
body .page-title-section {
????height: auto !important;
????background-size: contain !important;
????background-repeat: no-repeat !important;
??????padding: 110px 0;
}}
@media (max-width: 500px){
body .page-title-section {
padding: 50px 0
}}

Let me know if you have any confusion.

Thanks and regards

Honeypress Support Team

Thank you soo much for all your help. I have learned a lot and have gotten pretty good, but these had me stumped. Appreciate you!

• This reply was modified 4 months, 1 week ago by Jessi.

HI

Glad to know that it had been resolved.

If you like our theme and support, please rate us here.

https://www.ads-software.com/support/theme/honeypress/reviews/#new-post

Regards

Honeypress Support Team