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

Solved
JLbyone
Excursionist
170 16 34

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>

 

 

 

 

seccionhtmldesk.jpg

 

 

 

seccionhtmlmobile.jpg

 

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

seccionhtmlmobilev2.jpg

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

 

0 Likes
JLbyone
Excursionist
170 16 34

anyone is able to help me?

0 Likes
JHKCreate
Shopify Partner
1997 323 428

Hi @JLbyone ,

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

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
JLbyone
Excursionist
170 16 34

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

0 Likes
JHKCreate
Shopify Partner
1997 323 428

Just a URL would do!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
JLbyone
Excursionist
170 16 34

@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?

0 Likes
JHKCreate
Shopify Partner
1997 323 428

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.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
JLbyone
Excursionist
170 16 34

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

0 Likes
JHKCreate
Shopify Partner
1997 323 428

This is an 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!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
JLbyone
Excursionist
170 16 34

Thanks, and thanks you! it works really well! 

0 Likes