Customised header slider is not responsive

Hello,

I have customised a header slider (different images for different language) and different call to actions and the header slider is not responsive now, in does not show up well on mobile phone.

Could you help me please?

thank you very much

Hello @kamciao,

Mobile behavior of Sydney slider was reworked recently, so you should probably rework your modifications.

However, you can try to change Slider mobile behavior first, you can find that option at the bottom of Customize → Header area → Header Slider section.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hello Roman,

thank you for your answer. The thing is that I have changed the code with java script to make add different picture of header slider for different languages. Also the CTA are customized.
Do you think you could please check it out?

thank you very much

Here is the custom code:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

@media only screen and (min-width: 992px) {
    #masthead .col-md-4.col-sm-8.col-xs-12 {
        width: 20%;
    }

    #masthead .col-md-8.col-sm-4.col-xs-12 {
        width: 80%;
    }
}

html[lang="en-GB"] .header-slider .slide-item:nth-of-type(1) {
  background-image: url('http://www.allinfactory.com/wp-content/uploads/2017/05/KickOffHomeVFinal_En-optimisé.jpg') !important;  
}

html[lang="fr-FR"] .header-slider .slide-item:nth-of-type(1) {
  background-image: url('http://www.allinfactory.com/wp-content/uploads/2017/05/KickOffHomeVFinal_Fra-optimisé.jpg') !important;  
}

html[lang="es-ES"] .header-slider .slide-item:nth-of-type(1) {
  background-image: url('http://www.allinfactory.com/wp-content/uploads/2017/05/KickOffHomeImageEs-All-In-Factory.jpg') !important;  
}


Well, it looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

It is a code that was adviced to me by some of your colleagues. It was working well until now…

Hello Roman, sorry for all these messages. I have removed the different header slider images and now it appears well, there is only a problem with the text that does not fit. Any idea how could I fix that?
many thanks!!

@kamciao, you have this custom CSS rule:

.text-slider .maintitle {
		position: relative;
		display: inline-block;
		line-height: 67px;
		font-weight: 700;
		padding-bottom: 10px;
		width: 70%;
	}

Please remove line-height: 67px; or reduce the 67px value.

Kind Regards, Roman.

Hello Roman,

I tried but it did not work…

Strange, it seems to work when I disable it on your website with browser tools.

Did you try to clear your browser cache after removing that property:value pair?

Kind Regards, Roman.

Hello Roman, yes.

The first page of the header slider is ok because the content is short but the next slides are not good (the text does not fit and the CTA does not even appear). Im talking about the FRENCH mobile version. Here the text is longer that at the english version.

thank you

Hello @kamciao,

It looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.