Shopify themes, liquid, logos, and UX
Hi,
I need help with resizing my 2 half-banners and full-banner. On desktop version the image is full-width but on the phone is not (see photos). My theme doesn't have the option to adjust it manually for mobile.
Also, the full banner not only is not full-width but also looks small and there is a lot of empty space underneath. Is it possible to make it fill more space ?
Website : stockunion.co.uk
Solved! Go to the solution
This is an accepted solution.
Hi @elo1234 , Go to rt-application.css and add the following code :
.unero-banners-metro ul,
.unero-banners-grid ul {
margin: 0 -5px;
padding: 0;
max-width: 100% !important;
}
This is an accepted solution.
I test it on chrome, and it does seem to work fine.
This is an accepted solution.
No, the complete code should look like this:
@media (max-width:767px){
.unero-banners-grid ul li img {
object-fit: cover;
width: 100%;}
.vc_single_image-img.attachment-full {
height: 32vh !important;
}
}
hi, Sir
Which theme are you using?
if you are using dawn theme
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find base.liquid file
4) At bottom place this code
<style>
grid ul {
max-width: 100% !important;
}
</style>
This is an accepted solution.
Hi @elo1234 , Go to rt-application.css and add the following code :
.unero-banners-metro ul,
.unero-banners-grid ul {
margin: 0 -5px;
padding: 0;
max-width: 100% !important;
}
For the empty space under the banner go to theme.css and add the following code :
.row.empty_space{
height:0 !important;
}
hey @Abdosamer
i have a problem with my width as well. how can i adjust, that the grey part is not visible. im using spotlight theme. thanks in advance
Thank you so much, this worked, but on my chrome doesn't work properly? Only on safari and brave it updated but not on chrome , what do you think might be the reason? Is it Chrome thats causing it?
Also , in terms of ''row empty space'' code - i dont want to remove the empty space, i am wanting to extend the image so its more wide so it covers the whole section rather than adding empty space. Is that an option? I want to keep desktop version the same but mobile would have to be wider (see photo)
Also,
This is an accepted solution.
I test it on chrome, and it does seem to work fine.
Ok just checked and its all fine thanks so much!
Would you also have a solution for this ''row empty space'' code - i dont want to remove the empty space, i am wanting to extend the image so its more wide so it covers the whole section rather than adding empty space. Is that an option? I want to keep desktop version the same but mobile would have to be wider (see photo)
The image is already taking the full width of the screen on mobile, do you mean you want to increase its height?
Ok, go to rte-applications.css and add the following code :
@media (max-width:767px){
.unero-banners-grid ul li img {
height: 30vh !important;
object-fit: cover;
width: 100%;
}
}
It worked not for the section i wanted -- i want it for the full-banner not half-banners if that makes sense
This is the full banner?
The code I gave you increases the height of this banner.
It doesnt, it changed the half-banners to wider banners so they are rectangle now instead of square (see pic)
This is how it appears on my phone :
Yes so it looks different than original, thats not the banner that i want edited. Number 1 is before the code and number 2 is after
Ok, remove height: 30vh !important; from previous code , the add the following code snippet :
@media (max-width:767px){
.vc_single_image-img.attachment-full {
height: 30vh !important;
}}
Maybe there are some other code overwriting my code, I can send you access request to solve this problem.
So the complete code should look like this ?
@media (max-width:767px){
.unero-banners-grid ul li img {
object-fit: cover;
width: 100%;
.vc_single_image-img.attachment-full {
height: 30vh !important;
This is an accepted solution.
No, the complete code should look like this:
@media (max-width:767px){
.unero-banners-grid ul li img {
object-fit: cover;
width: 100%;}
.vc_single_image-img.attachment-full {
height: 32vh !important;
}
}
worked perfectly thanks so much!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024