Ensure backgrounds always fill different device screens

Hello,

at http://combined.technology/ how do I enable the background of my "Image Show GK4" module slides set in position header_bg to adapt to full fit the screen width of all devices please (currently on very large screens there are black borders appearing to the sides)?

I have tried the "image stretch" option in the Image Show module.

Out of interest: what is the suggested image dimensions for these slides if I want them to fully fit all devices (I don't mind side cropping - I don't want them stretched - I just don't want black side borders of larger width devices)?

Many thanks and a happy new year!

Hi

Please replace the code You've used in override with this:

Code: Select all

#gkIs-gk-is-88.gkIsWrapper-gk_university .gkIsSlide {
    background-size: cover;
    height: 896px;
}


Hello,

Thank you for that.

I have added that to combined.technology/templates/gk_university/css/override.css

with no success.

So, I looked under the Joomla Admin control panle: templates/gk_university/Advanced Settings

and ensured that "CSS Override" was enabled.

I also tried adding the suggested CSS to "Custom CSS Code"

None of these attempts worked.

Please could you advise?

Many thanks, and, Happy New Year!

Any ideas please?

Hi

The code I gave You was to cover the area, but I've just noticed the slider is restricted to 1720px. To force full screeen use this code:

Code: Select all

#gkIs-gk-is-88.gkIsWrapper-gk_university figure,
#gkIs-gk-is-88.gkIsWrapper-gk_university .gkIsPreloader,
#gkIs-gk-is-88.gkIsWrapper-gk_university .gkIsSlide {
max-width: 100%;
}