Help Needed with Mobile Responsiveness of Header Banner Message

Hi,

The message I added through your theme, under Header Banner -> Banner content ->

<p style="text-align: center">This site is a test and is under development. Any actions taken here will not be reflected in reality.

is not responsive on the mobile version and breaks. Could you help me fix it? See attached photo.

Best regards,
Nikola

Image here.

Attachments:

You must be logged in to view attached files.

Hi ivoltbg,

Thanks for reaching to us.

1. Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to below Custom Class:

.header-banner p

Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

2. Reduce padding value of an existing code:

@media (max-width: 768.98px) {
    .header-banner-container {
        padding-inline: 40px;
    }
}

Regards,
Hung PD

Hi,

I created a custom selector and reduced the padding-inline to 20px or lower, but unfortunately, there’s no effect. I would appreciate further assistance.

Best regards, Nikola

Hi ivoltbg,

I helped you to fix it, please double check.

Regards,
Hung PD

Hello,

I tried with cleared cache from several browsers, but unfortunately, it got even worse — it’s not displaying properly on either mobile or desktop.

I kindly ask for further assistance.

Best regards, Nikola

Hi ivoltbg,

Please double check. https://prnt.sc/4fu9218kj1eH

Regards,
Hung PD

Hello, it worked!

Could I please ask you to share how and where you did it, so I can learn from this ticket?

Thank you in advance!

Best regards,
Nikola

Hi ivoltbg,

You can increase the height of container on mobile https://prnt.sc/3idPhUzHBD_K

Regards,
Hung PD

Ok, thank you very much.

You can close topic.

[Author]

Posts