Problem with hero richtext

[sosober]

Hi everyone!!
I am having troubles with my hero banner on mobile version.

As you can see the rich text h3 has gone to the right and I’ve tried different codes but nothing work.

I’ve made some changes to the code yesterday but to other sections with other IDs.

Thank you in advance!

www.sosober.it

[Moeed]

Hey @sosober

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (max-width: 767px) {
article.hero--banner_wrapper.span-12.relative h3 {
    width: 100% !important;
    font-size: 18px !important;
}
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[Dan-From-Ryviu]

@sosober

www.sosober.it

Please add this code to Custom CSS of that section to solve the issue.

@media (max-width: 749px) {
    .rte.hero--banner_richtext { margin: 0; }
}

[tim_1]

This happens because you have this rule in base.css which makes your
H3 same width as the screen/window:

 .hero--banner_richtext h3 {
  ...
    width: 100vw !important; */      /* ✅ larghezza piena schermo */
    max-width: 100vw !important; */  /* ✅ nessun limite */
    text-align: center !important;/* facoltativo: centra il testo */
    justify-content: center !important;
  }

But its parent has limited width and centred on horizontally:

So left of the H3 is positioned where parent allows.

Depending on what your goal is the fix cam be different.

If your goal is to centre H3, then remove width and max-width properties from the code snippet above.

And if it is for the H3 to be centred, but also be 100vw-wide, then you need to add this to the CSS rule above:

 margin-left: calc(50% - 50vw);

[oscprofessional]

Hi @sosober ,
Go to Online Store > Themes > Actions > Edit Code > theme.css Add below code at the bottom of theme.css file

@media (max-width: 767px) {
  .hero--banner_richtext h3 {
      text-align: center !important;
      width: 100% !important;
      font-size: 20px;
  }
}