How to make the text in the header slider responsive

Hi,

As checked, seems likely you’ve added this CSS code to your website’s Additional CSS. And it breaks the slide text responsiveness.

.slide-inner {
    text-align: left;
    padding-left: 100px;
    padding-right: 700px;
}

The padding left and right are too large on smaller screen. Hence, try replacing it with:

@media only screen and (min-width: 992px) {
  .slide-inner {
      text-align: left;
      padding-left: 100px;
      padding-right: 700px;
  }  
}

I’d request giving it a try and let me know your views.

Regards,
Kharis

Thank Kharis,

It’s responsive now, however is is centered. Is there a way to left justify it and make the subtitle smaller on mobile only?

Hi,

Try adding this CSS code:

@media only screen and (max-width: 991px) {
  .header-slider .slide-inner {
    padding-left: 20px;
    text-align: left;
    max-width: 60%;
  }
  .header-slider .text-slider .maintitle {
    font-size: 20px;
  }
  .header-slider .text-slider .subtitle {
    font-size: 16px;
    line-height: 20px;
  }
}

I hope that helps.

Regards,
Kharis

Great! We’re almost there ???? I made the title a little bigger. Now my question is can we make the height of the background image taller so the user can see everything when they hold their phone vertically? It’s perfect horizontally. I tried to add padding to the top and bottom to see if it would make everything visible but it didn’t work. Is this the right approach? See below.

@media only screen and (max-width: 991px) {
  .header-slider .slide-inner {
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: left;
    max-width: 60%;

  }

Hello Kharis,

It’s been about two weeks since I’ve received an answer to my last question. Should I post a new query?

Thank you!

Hi,

I am sorry for the delay.

Try adding this CSS code:

@media only screen and (max-width: 500px) {
  .header-slider .slide-inner {
    max-width: 100%;
  }
}

Regards,
Kharis

No problem Kharis. Thank you for your help. We are almost there ?? I made some adjustments to what you gave me and it works. However, is there a way to add padding below the button so it can be even like the top?

Hello Kharis,

Just checking in to see if there is a way to add padding below the button so it can be even like the top?

Have a great day!

Hi,

I am sorry for the delayed response.

Try adding this CSS code:

@media only screen and (max-width: 500px) {
  .header-slider .slide-inner {
    top: 37%;
  }
  .header-slider .text-slider .maintitle {
    ont-size: 25px; 
  }
}

Regards,
Kharis