Shopify themes, liquid, logos, and UX
Hi everyone,
I hope you are all doing well!
I have been building a site for a client and ran into some trouble with coding an HTML section to feature three youtube videos side by side in a row. For more information, I am using the Boundless theme. I found this code online and hoping to tweak it to be more aesthetically pleasing on the site. I want to have the videos appear right below the blog posts. However, the videos overlap below the footer due to changing the <div.full-width> position from relative to absolute. If I use relative the videos just appear squashed. I have that set right now on the site. I will provide a photo of the difference between changing from absolute and relative/static in the tag div. full-width(highlighted below in the code). I love the full player look when it's set to absolute but it places the videos below the footer.
//* This is the code
<style>
div.full-width {position:relative;width:100%;left: 0px;top:100px;float:center;}
@media screen
and (min-width: 1051px), screen and (min-device-width:851) {
div.video {position:static;float:left;padding:5px;width:30%;}
iframe {width:100%;}
}
}
</style>
<div class="full-width">
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/E2HM2eCeShU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/-EfriB4sNgk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div class="video"><iframe width="1560" height="315" src="https://www.youtube.com/embed/ES4b2a7p3kM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
</div>
//
Screenshots Below
Relative
Absolute
I have tried changing the width of the iframes and the 'div. full-width tag' but it loses its structure. I am at a bit of a loss with how to proceed. If anyone can help me out that would be much appreciated!
Thanks,
Emira2021
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024