Text is normal size on desktop but too big on mobile

I have a background video on dawn theme, the background video has text overlapping. On desktop text placement looks normal, however on mobile the text is too big and dosent fit the page. How can i fix this?

Hello @suoshie
can you please share store URL so i can provide you some solution on that

Hi @niraj_patel thanks for reaching out. Here is my website link: https://c1e46d.myshopify.com/collections

Please make sure you are checking the “about us” section as that is the page i am referring to, thank you. As you can see on desktop it looks fine but on mobile you cant see the full text as the top part is covered by the header / dosent fit on the page.

Hi @suoshie

Please follow these steps:

  • Go to Online Store => Themes => Edit code. Then, search base.css and add the below CSS code at the end of the base.css file. Click save your code:

@media screen and (max-width: 500px) {
   .videoBoxInfo .videoBoxInfoTitle {
       font-size: 16px !important; /*Increase or decrease the size as you like*/
   }
   .videoBoxInfo .imageBoxInfoDescription p{
       font-size: 14px !important; /*Increase or decrease the size as you like*/
   }
}
  • Here is the result:

I hope that it will work for you.