How to resize desk or mobile html section (Ventura theme)

[JLbyone]

Good afternoon, I am making changes to my online store with the Ventura theme, and I have added a section in html, in my desktop version it displays correctly, but in my mobile version it displays incorrectly.

How could I reduce the size appropriately for my mobile version, without changing the appearance on my desktop version.

This is the content of the html section that I have added

  <div class="o-container">
    <h1 style="--max-width: 100%;font-size: 2.3rem; color: #000000;"
    >Empiezan nuestras segundas rebajas</h1>
  </div>
  <div class="o-container">
    <p style="--max-width: 100%;font-size: 1.2rem; color: #000000;"
    >Selecciona uno de nuestros modelos, los gastos de envio son gratis!</p>
  </div>

i just edit some picture, to show you how i want to edit my mobile version:

I hope I have explained myself well, thanks so much, JL.

[JLbyone]

anyone is able to help me?

[JHKCreate]

Hi @JLbyone ,

Sure thing, would you mind sharing your store's preview URL here or by Inbox so that we solve this for you?

[JLbyone]

Thanks a lot for answering @JHKCreate , what do you need to see exactly? 

[JHKCreate]

Just a URL would do!

[JLbyone]

@JHKCreate im so sorry but i have the project under construccion so, i have my shop closed, and just show the pre-launch web.. can i do something more??or just with site url?

[JHKCreate]

You can create a preview URL without having to open up your shop so I can what's going on. Alternatively I can request collaborator access and have a look directly. Let me know if that's okay with you.

[JLbyone]

i sent you preview url in pm, thanks a lot!!

[JHKCreate · Accepted solution]

@JLbyone , add the following code to your "theme.scss" file at the end:

@media only screen and (max-width: 750px)
{
#shopify-section-161080801499a0c10c > div > div > div > div > div > div:nth-child(1) > h1 {
    font-size: 16px!important;
}

#shopify-section-161080801499a0c10c > div > div > div > div > div > div:nth-child(2) > p {
    font-size: 16px!important;
}

.section-block--padding.grid__item.one-whole.align--center {
    padding: 5px;
}
}

That should do it!

[JLbyone]

Thanks, and thanks you! it works really well!