Slider text adjustment

Hi,

Is it possible to make some adjustment to my slider text as below?

  1. Adjust the position to right side of the slide.
  2. Align the text to right instead of center.
  3. Adjust the font size become smaller a bit.

Thank you and regards,
limpeek

Hello Limpeek,

Yes, it is possible. Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.slide-inner{
  text-align: right;
  padding-right: 20px;
}

.text-slider .maintitle:after{
  left: auto;
  right: 0;
}

.text-slider .maintitle{
  font-size: 40px;
}

.text-slider .subtitle{
  font-size: 25px;
}

Regards,
Kharis

Hi Kharis,

Thanks for the code.

Is it possible for the to do some adjustment on the position and alignment as below?

  1. Align the text to right side instead of left side. What I mean is the “Feel free to look around” will start just below the alphabet “W” of welcome.
  2. Move the whole slide title and subtitle to right side a bit. Because now they are like stick to the left border.
  3. Shift the Call to action button to center of the slider title and subtitle.

Hope to hear from you soon.

Thanks and regards,
limpeek

Hello there,

Try to replace the custom CSS code I suggested previously with this one:

.slide-inner{
  text-align: right;
  padding-right: 20px;
}

.text-slider{
  display: table;
  text-align: left;
  float: right;
}

.button-slider{
  clear: both;
  float: right;
  margin-right: 175px;
}

.text-slider .maintitle:after{
  left: 0;
  right: auto;
  margin-left: 0;
}

.text-slider .maintitle{
  font-size: 40px;
}

> 2. Because now they are like stick to the left border.

Does this happen on mobile screen?

Regards,
Kharis

Hi Kharis,

For the mobile version, the texts and button are at the left side.

Which part of the code should i adjust if i need to shift the text and button to the left a bit? Because i will add in a photo at the left and will need to adjust the text position again later.

Thanks and regards,
limpeek

Hello there,

Try to apply the following CSS code:

@media only screen and (max-width:359px){
  .slide-inner{
    margin-left: 10px;
  }  

  .button-slider{
    margin-right: auto;
    float: left;
  }
}

Regards,
Kharis

Hi, how can I move down just a little bit the text on the slider?

Hello @gangelovska,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.slide-inner{
  margin-top: 100px;
}  

Adjust the value accordingly.

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

After add the code into custom css, the slider text is on the left side of my mobile screen.

Is it possible to adjust the text to the center of the screen, just like the default?

Thanks and regards,
limpeek

Hello there,

Try to apply the following CSS code:

@media only screen and (max-width: 640px){
  
  .slide-inner{
    text-align: center;
    padding-right: 0;
    margin-left: 0 !important;
  }
  
 .text-slider{
    display: block;
    text-align: center;
    float: none;
  } 
  
  .text-slider .maintitle:after{
    left: 50%;
    right: auto;
    margin-left: -20%;
  }
  
  .button-slider{
    clear: both;
    float: none !important;
    margin-right: auto;
  }  

  
}

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for the code again.

One last thing, could i adjust the font size of the slide subtitle text?

Thanks and regards,
limpeek

Hello there,

To manage the subtitle font size, try to apply the following:

.text-slider .subtitle{
  font-size: 20px;
}

Adjust the value accordingly.

Regards,
Kharis

Hi Kharis,

Really thanks for your help and sorry for all the troubles.

Thanks and regards,
limpeek

You’re always welcome here.

I am marking this thread as resolved. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Regards,
Kharis