edit font and button size and location on auto video in only mobile view

[katty4]

pls, advise me how to change the button and letter size and location on auto video in only mobile view.

I use dawn theme to create my store. desktop version is fine but mobile version, letters and button cover all auto video. I want make letter smaller or make separate box as other image banner in mobile version only.

pls, help me for solving this issue

[Made4uo-Ribe · Accepted solution]

Hi @katty4 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media (max-width: 480px) {
    .wbs-pck__text-alignment-center .wbs-pck__block-id-buttons_UpWmmY div.wbs-pck__button-area {
        width: fit-content;
    }
    .wbs-pck__block-id-buttons_UpWmmY .wbs-pck__button, .wbs-pck__text.wbs-pck__rte {
        font-size: 12px;
    }
    .wbs-pck__block-id-heading_ynw67n .wbs-pck__heading {
        font-size: 25px;
    }
}
</style>

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[BSS-TekLabs]

Hello @katty4 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[katty4]

https://slateandstone.com/

[Made4uo-Ribe · Accepted solution]

Hi @katty4 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media (max-width: 480px) {
    .wbs-pck__text-alignment-center .wbs-pck__block-id-buttons_UpWmmY div.wbs-pck__button-area {
        width: fit-content;
    }
    .wbs-pck__block-id-buttons_UpWmmY .wbs-pck__button, .wbs-pck__text.wbs-pck__rte {
        font-size: 12px;
    }
    .wbs-pck__block-id-heading_ynw67n .wbs-pck__heading {
        font-size: 25px;
    }
}
</style>

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[BSSCommerce-B2B · Accepted solution]

@katty4 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
@media only screen and (max-width: 768px) {
.wbs-pck__image__wrapper > * {
    grid-area: inherit!important
}
.wbs-pck__inner-content {
  transform:scale(0.8)
}
}
</style>

Result:

[katty4]

thank you so much! it works really well! I had a hard time to fine </body> but finally made it!

thank you again!