Reduce Height off " Slide / page header section"

[Andy]

Hi,

Ive removed the image from the page header section (slider 2) so it is just white but would like to reduce the height of the slider.

see: https://tecknaonline.com/freecycle/ordomain-header-size.png

If we reduce the height via the css below from height 100% to height 50%, it removes the top padding but still have big wide gap below.

.vc-parent {
width: 100%;
height: 50%; (was 100%)
display: table;
}

Is there a bit of CSS you can point us to, to enable us to control the height of the slider?

thanks

Andy

[ThemeLooks Support Team]

Hi Andy,

Please use this CSS instead:

#service.service-primary {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

Best Regards,
ThemeLooks Support Team

[Andy]

Hi,

This works well for “slider 1” but not if using “slider 2” … Slider 2 (horizontal slide) is our preference.

slider 1: https://tecknaonline.uk/email/standard-pop-imap-email/ (we can see top it cut off but will adjust your css entry later)

slider 2: https://tecknaonline.uk/email/office-365-exchange-mailboxes/ (no effect)

thanks

Andy

[ThemeLooks Support Team]

Please add this extra css for slider-2:

.pageHslider-slider {
    height: auto;
    padding: 150px 0 80px;
}

.pageHslider-slider .owl-item .item > .container > .row > div {
    float: none;
    height: auto;
    display: table-cell;
    vertical-align: middle;
}

@media screen and (max-width: 991px) {
    .pageHslider-slider .owl-item .item > .container > .row > div {
        display: block;
        width: 100%;
    }
}

Please don’t forget to give us ‘rating and review’ (on https://themeforest.net/downloads ), if you like our Theme and our support too. It will give us inspiration and make us more ‘happy’ to support.

Best Regards,
ThemeLooks Support Team

[Andy]

hi,

VERY CLOSE 🙂

https://tecknaonline.uk/email/office-365-exchange-mailboxes/

There is still a big gap between the bottom of the slide and the beginning of the content.

This is the only custom CSS we have.

#service.service-primary {
height: auto;
padding-top: 55px;
padding-bottom: 10px;
}
.pageHslider-slider {
height: auto;
padding: 150px 0 80px;
}

.pageHslider-slider .owl-item .item > .container > .row > div {
float: none;
height: auto;
display: table-cell;
vertical-align: middle;
}

@media screen and (max-width: 991px) {
.pageHslider-slider .owl-item .item > .container > .row > div {
display: block;
width: 100%;
}
}

thanks

[ThemeLooks Support Team]

Please add below CSS too:

#pageHslider {
    height: auto !important;
    min-height: 0;
}

Best Regards,
ThemeLooks Support Team

[Andy]

that did the trick .. thanks

I have also left 5***** feedback ..

something for the “future to do list” would be to have custom CSS also available under the Ordomain Options, makes it more obvious.

thanks

Andy

[ThemeLooks Support Team]

Yes, we have listed this in our theme update list.

Best Regards,
ThemeLooks Support Team

[Bret Whitcombe]

Hi,

I also had this issue and the above custom CSS worked perfectly for the design. However, this has now left me with another problem. My slider now scrolls through the 4 slides once and then stops.

Any ideas?

Many thanks,
Bret

[ThemeLooks Support Team]

Hi Bret,

If you need assistance, then please create your own topic with details about your issue. Please don’t reply someone else created topic.

Thanks for your understanding.

Best Regards,
ThemeLooks Support Team

[Author]

Posts