URGENT ON MOBILE : COLOR and POSITION OF THE TITLES IN THE HEAD SLIDER

Hi Kharis,

Two little things for the head slider but very important and a little urgent because we’re deploying the site tomorrow

How can I change only on mobile the color of the titles in the headsliders and especially enlarge the position of those titles but only on cellular.
cf screenshot (you will see that there are too much blank space to the right and left.

Thanks a lot and have a nice day,

Best regards

Isabelle

Hello there,

Try to apply the below additional CSS code:

    @media only screen and (max-width: 780px) {
      .text-slider .maintitle {
        font-size: 18px;
      }
      .text-slider .subtitle {
        font-size: 16px;
      }
    }

Regards,
Kharis

Hi there

I tried but it changes only the size not the position

Because of the margin left right I suppose

Could you add maybe something on the margin right and left

Please

It s very important for us because it is the first that people see

Thanks

Best regards

Isabelle

Le sam. 11 mai 2019 à 11:30, Kharis Sulistiyono via aThemes Forums team@athemes.com a écrit :

Hello there,

Try this CSS code:

    @media only screen and (max-width: 780px) {
      .text-slider {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

Regards,
Kharis

no sorry it doesn’t work.
Is it normal that we don’t mention above with the one with the padding , test-slider .maintitle ?

regards

hi kharis,

after
it is desperating because I used your codes CSS making some additions on the police (shadow) that prove that your code is good and works on mobile but only the margin no !!!
could you try to find another solution because as a header slider it is important to have the text of titles well in page.

thanks

regards

isabelle

ps the additions of code I put

    @media only screen and (max-width: 780px) {
      .text-slider .maintitle {
        font-size: 25px; 
        padding-left: 0px !important;
        padding-right: 0px !important;
        font-weight: 500!important;
        text-shadow: -1px -1px white, 1px 1px #333; 
        text-shadow: 1px 1px white, -1px -1px #444 ;
        padding: 0px;
        margin: auto!important;
      }
      .text-slider .subtitle {
        font-size: 18px;
        font-weight: 500!important;
        text-shadow: -1px -1px white, 1px 1px #333; 
        text-shadow: 1px 1px white, -1px -1px #444;
        width: 300px;
        padding: 0px;
        margin: auto!important;
      }
    }

hi kharis,

after

it is desperating because I used your codes CSS making some additions on the police (shadow) that prove that your code is good and works on mobile but only the margin no !!!

could you try to find another solution because as a header slider it is important to have the text of titles well in page.

thanks

regards

isabelle

ps the additions of code I put

    @media only screen and (max-width: 780px) {
    	.text-slider .maintitle {
    		font-size: 25px;
    		padding-left: 0px !important;
    		padding-right: 0px !important;
    		font-weight: 500 !important;
    		text-shadow: -1px -1px white, 1px 1px #333;
    		text-shadow: 1px 1px white, -1px -1px #444;
    		padding: 0px;
    		margin: auto!important;
    		;
    	}
    	.text-slider .subtitle {
    		font-size: 18px;
    		font-weight: 500 !important;
    		text-shadow: -1px -1px white, 1px 1px #333;
    		text-shadow: 1px 1px white, -1px -1px #444;
    		width: 300px;
    		padding: 0px;
    		margin: auto!important;
    		;
    	}
    }

Le sam. 11 mai 2019 à 12:34, Kharis Sulistiyono via aThemes Forums team@athemes.com a écrit :