Slider (2nd heading) - Mobile Responsiveness

Hello,

Could you provide me with a code for the additional CSS to make my 2nd header (subtitle) on the Sydney slider more mobile responsive? Please see attached picture. I have a code the main title, but I can’t find one for the subtitle.

2nd Header Mobile Responsive

Also, for the second slider, the title and subtitle are different from the first slider. However, it does not go into effect. It stays the same for both sliders. Can you assist?

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba

Here it is: honeymoonregistry.website

Hi,

You can reduce the sub-title’s font-size with this Custom CSS:

@media only screen and (max-width: 768px) {
.text-slider .subtitle {
    font-size: 30px !important;
}
}

@media only screen and (max-width: 400px) {
.text-slider .subtitle {
    font-size: 24px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hello, it works for the mobile. However, for the ipad/tablet, I need to add another space between the header’s text.

Site: honeymoonregistry.website

Do you have a code for this? Attached is a picture.

Hi,

Please use this Custom CSS instead to add a larger line-height to your sub-title too:

@media only screen and (max-width: 768px) {
.text-slider .subtitle {
    font-size: 30px !important;
    line-height: 1.5 !important;
}
}

@media only screen and (max-width: 400px) {
.text-slider .subtitle {
    font-size: 24px !important;
    line-height: 1.5 !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba