Shopify themes, liquid, logos, and UX
Hi everyone! I am currently trying to make my image banner exactly cover the whole screen. Right now my banner fits almost perfectly on my laptop but when I use my pc (which has a bigger display) the banner changes size. I basically want to keep the proportion of my image banner the same covering the full screen exactly regardless of the display size. Any ideas on how to make the image banner fixed size?
This is how I want it: https://djerfavenue.com/en-eu/
You can see on the site above that it is not bigger than the display or smaller, perfectly fitting regardless of the display size
My site: https://sunbelezza.myshopify.com/?_ab=0&_fd=0&_sc=1
Solved! Go to the solution
This is an accepted solution.
Hi @Vilgot There are two ways for you to solve this
1. Make the header fixed and the height become zero:
<style>
header {
position: fixed;
top: 39px;
z-index: 99;
background: #fff;
}
</style>
Or reduce the height
<style>
.banner {
height: 95vh; // vh mean viewport height and will fit to every screen
}
</style>
Hope this can help you solve the issue
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Thanks for the reply! Responsive images sounds like the right solution. Do you know the line of code in order to accomplish that?
Hi @Vilgot
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
.banner {
height: 100vh; // vh mean viewport height and will fit to every screen
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi Richard!
Thank you so much for the reply! This worked, now the picture is covering the full screen. The only issue is that the banner is slightly bigger than the display when including the header. I want the banner and the header to cover the full display at the same time so on the first down-scroll on the homepage the image banner ends. Right now the image banner is covering the full screen only when scrolling past the header. Any ideas?
Best regards,
Vilgot
This is an accepted solution.
Hi @Vilgot There are two ways for you to solve this
1. Make the header fixed and the height become zero:
<style>
header {
position: fixed;
top: 39px;
z-index: 99;
background: #fff;
}
</style>
Or reduce the height
<style>
.banner {
height: 95vh; // vh mean viewport height and will fit to every screen
}
</style>
Hope this can help you solve the issue
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hello Richard, this works perfect on PC but then on a mobile version leaves a big white blank chunk empty, is there anything that can make this work for both ? thank you!
Also you can use the next code.
.gradient {
background: var(--gradient-background) url(Paste URL of pic) fixed top left/cover !important;
background-color: transparent !important;
}
This code will need to be put in the "Assets" folder. I just put it in the last line of the code so I can look for it more easier. Also remember to paste the location of you image, so will need to delete "url(Paste URL of pic)" and paste the URL of your picture. This will put the whole image in the background as you can see in the next picture, I hope this will help everybody.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024