How can I stack images over videos on mobile while keeping them side by side on desktop?

Store Design
1

Hi,

I’m looking to stack the images on top of the videos on mobile on my site, but I want to keep them side by side on desktop. What should I do? They are currently side by side on mobile and desktop, but it looks very small on mobile, hence why I want to make it stack.

https://smartonegolf.com

Thanks!

1 Like
2

Hi @miberk90 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 400px) {
    .shopify-section .full-width .custom-content {
        display: block;
    }
    .shopify-section .full-width .custom__item.small--one-half {
        -webkit-flex: 1 0 100%;
        -moz-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

@miberk90

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
.custom__item.small--one-half {
-webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    max-width: 100%;
}
}