How to fix video background and footer issues on mobile?

Store Design
, , , , , ,
1

Hello all,

I am having trouble with two things:

  1. Video Background is not resizing on mobile version

  2. Footer is on the right side in mobile version

This is a preview link: https://pzfz1rlo6dcf4xlb-65984954636.shopifypreview.com/?fbclid=IwAR3J5TVxf19OrmP9DnRdeobih7Mwh_5rNP…

Any help is appreciated.

2

To address the issues you’re facing in Shopify with the video background and footer on the mobile version, you can follow these steps:

  1. Video Background not resizing on mobile version:

    • Go to your Shopify admin and navigate to Online Store > Themes.
    • Find your current theme and click on “Actions” > “Edit code”.
    • Locate the relevant section or file responsible for the video background.
    • Look for the CSS code controlling the video background’s size or dimensions.
    • Modify the CSS code to make the video background responsive on mobile. For example, you can use the object-fit property with a value like cover or contain to adjust the video’s aspect ratio on different devices.
    • Save the changes.

  2. Footer on the right side in mobile version:

    • Access the theme editor by going to Shopify admin > Online Store > Themes.
    • Find your current theme and click on “Actions” > “Edit code”.
    • Locate the relevant CSS file responsible for the footer styling.
    • Look for the CSS code controlling the positioning or alignment of the footer.
    • Modify the CSS code to adjust the footer’s positioning on mobile devices. For example, you can use media queries to target specific screen sizes and adjust the float or display properties accordingly.
    • Save the changes.