"Title for the first slide" not centered with rest of slider features

The “Title for the first slide” on my website isn’t centering over the rest of the text/CTA button on my homepage slider. Little help?

Hello there,

I’m sorry to hear you’ve run into issue. I’ll do whatever I can to help. But, as it’s not the default behavior of Sydney, It is hard for me to suggest a solution without inspecting your site. Please share your site’s URL here, so I can take a look.

Regards,
Kharis

My bad! it’s karenmason.forkandtheroad.com

Hello there,

From the web browser’s inspector tool, it is displaying the below custom CSS code you might add.


.slide-inner {
    width: 45%;
}

This stye rule makes the slide content container becomes narrower. As the element position starts from the left, that’s why it isn’t centered.


padding-right: 210px;

I also found the above declaration which actually shouldn’t be there in the below code block in the main theme’s stylesheet.


.text-slider .maintitle {
    position: relative;
    display: inline-block;
    font-size: 57px;
    line-height: 67px;
    font-weight: 700;
    padding-bottom: 10px;
    padding-right: 210px;
}

Or, do you have any reason why you put it there? Probably I could suggest you better alternative.

Regards,
Kharis

Hmmm. The slide-inner CSS is to make the header/subheader/button on the left side of the home screen. When removing it, the title is still not centered.

Adjusting the padding-right CSS doesn’t seem to affect anything.

I’d love a better alternative to that CSS you included – any help would be much appreciated. Thank you, Kharis!

Let me back to your initial query. So you want the slide content to be vertically centered? Please advise.

Regards,
Kharis

Yes, please! We’d like it to look the way it appears in the sample ,essentially, but the content to be on the left side of the screen.

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   $('.text-slider-stopped').wrapInner('<div class="inner"><div></div></div>');
   

})(jQuery);

  1. Update

Then apply the below CSS snippet into your site’s additional CSS option or child theme’s style.css.


.slide-inner {
  top: 0;
  -webkit-transform: unset;
  -moz-transform: unset;
  -ms-transform: unset;
  -o-transform: unset;
  transform: unset;  
  height: 100%;
  min-height: auto; 
}  

.slide-inner .inner{
  display: flex;
  align-items: center;
  text-align: center;
  height: 100%;
}  

.slide-inner .inner > div{
  width: 100%;  
}  

Let me know how it goes.

Regards,
Kharis

Somehow it fixed itself. Thank you for all of your help!

Awesome! Let me know in a new topic if you need anything else.

Regards,
Kharis