Make Custom Text Responsive

Solved
Highlighted
Tourist
7 0 1

Someone, please help me I have spent days trying to figure this out.

So I'm trying to create a section with a video and text on the right-hand side as well, I have already done this however it's using a GIF file with the file being massive so I have converted it to an mp4 which file size was a  drastic difference. I have coded the video using the custom HTML section have got it to work exactly like the GIF and have even got it to be responsive. But I can seem to get the text next to it to be responsive as well and end up taking half of the page on mobile along with the video instead of being stacked on top of each other 

How would I fix this,

Thanks in advance 

 

 

0 Likes
Highlighted
Shopify Partner
1023 214 463

@Adam710 

 

Send me your store URL so I can check and assist you better.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
Tourist
7 0 1

https://tipsymonkey.com.au/ 

This is how I exactly want it, however, an Mp4 file instead,

Is there a way I can link you to the duplicate file where I'm editing the code for this? 

0 Likes
Highlighted
Shopify Partner
1023 214 463

@Adam710 

 

Ok, understood! Send me your store so I can check the issue and provide you exact solution.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
Tourist
7 0 1

How do I do that?

 

0 Likes
Highlighted
Tourist
7 0 1

The link is https://tipsymonkey.com.au/?_ab=0&_fd=0&_sc=1 scroll down to the very bottom, the top is what I want it to like like but I want it to also vertically go under the video on mobile

 

0 Likes
Highlighted
Shopify Partner
1023 214 463

@Adam710 

 

Go to the Assets > theme.scss.liquid file and add following code at the end of file:

@media only screen and (max-width: 749px){
#shopify-section-1595555126334 .custom__item.small--one-half {
    flex: none;
}
}

 

Cheers,

Tejas 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
Tourist
7 0 1

Just put the code in now, unfortunately it didn't work 

0 Likes
Highlighted
Shopify Partner
1023 214 463

This is an accepted solution.

@Adam710 

 

Try this code:

@media only screen and (max-width: 749px){
#shopify-section-1595555126334 .custom__item.small--one-half {
    flex: none;
    width: 100%;
}
}

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Tourist
7 0 1

Yes, it worked!! Thank you so much for the help 

1 Like