Liquid, JavaScript, themes, sales channels
Hi,
How can I stop the white border from appearing on the background video section?
Example below.
Thanks
Solved! Go to the solution
This is an accepted solution.
@JKIRK wrote:Hi Paul,
I have added the code and it has worked, thank you so much!
No problem please like and accept the quick solution , though lets keep in mind this is a bandaid and to solve the underlying problem you'd probably need to put that iframe into a blank layout and go through devtools trying to find what cause that jog|row|height issue.
Great layout btw and video, though note a 2 minute 4k autoplay video is very unfriendly to batteries so please consider a pause button.
If you ever a/b test the video used while the model is pretty those dynamic orbiting light shots of jewelry on the rocks are much hotter.
Goodluck!
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Provide better detail a screenshot by itself is less than useless for troubleshooting issues like this.
https://community.shopify.com/c/shopify-design/help-us-help-you/m-p/668159#M166563
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Hi Paul,
The shop link is https://fr.apm.mc/
The theme is Prestige.
It is the background section part that is the problem, here is the section code.
Thanks
If this is a custom content block validate the html that's being added https://validator.w3.org/#validate_by_input
Then validate the entire page https://validator.w3.org/
Often the problem is there is inner content that is bigger than the container.
Often solved with a combination of overflow:none; , margin-top:0; , padding-top:0; etc on the containing element or relevant wrapper.
Or it's messing with the sticky header.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Hi Paul,
Thanks for the reply, overflow is hidden and there's no margin or padding. It only shows the white border in certain sizes when I adjust the window size.
Sorry I am still new to Shopify.
Thanks
@JKIRK wrote:Sorry I am still new to Shopify.
No problem though this is more of a CSS,HTML, Javascript and vimeo issue.
There's some sort of weird jog issue, I think iframe being dynamically positioned and the video large dimensions and aspect ratio , and maybe still the announcement bar or sticky header.
The iframe isn't being offset properly.
A sloppy bandaid quick fix is to try and negative the top margin, but it's a magic number in the below it's -174 for a 635px height viewport on this laptop
@media screen and (min-width: 1140px) {
.ImageHero--large {
min-height: 850px;
margin-top: -174px;
}
}
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Hi Paul,
I have added the code and it has worked, thank you so much!
This is an accepted solution.
@JKIRK wrote:Hi Paul,
I have added the code and it has worked, thank you so much!
No problem please like and accept the quick solution , though lets keep in mind this is a bandaid and to solve the underlying problem you'd probably need to put that iframe into a blank layout and go through devtools trying to find what cause that jog|row|height issue.
Great layout btw and video, though note a 2 minute 4k autoplay video is very unfriendly to batteries so please consider a pause button.
If you ever a/b test the video used while the model is pretty those dynamic orbiting light shots of jewelry on the rocks are much hotter.
Goodluck!
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Future designers and developers see the below starting doc to support media directly in a theme from content added to the shopify admin instead or an external source
https://shopify.dev/themes/product-merchandising/media/support-media
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
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