How can I resize my banners for mobile viewing?

[elo1234]

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

[Abdosamer · 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;
}

[Abdosamer · Accepted solution]

I test it on chrome, and it does seem to work fine.

[topnewyork]

hi, Sir

Which theme are you using?

[topnewyork]

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>

[Abdosamer · 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;
}

[Abdosamer]

For the empty space under the banner go to theme.css and add the following code :

.row.empty_space{
 height:0 !important;

}

[RobArt98]

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

[elo1234]

@Abdosamer 

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, 

[Abdosamer · Accepted solution]

I test it on chrome, and it does seem to work fine.

[elo1234]

@Abdosamer 

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)

[Abdosamer]

The image is already taking the full width of the screen on mobile, do you mean you want to increase its height?

[elo1234]

@Abdosamer 

Hi,

Yes i want to increase height just so it fills the space below

[Abdosamer]

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%;
}

}

[elo1234]

@Abdosamer 

It worked not for the section i wanted -- i want it for the full-banner not half-banners if that makes sense

[Abdosamer]

This is the full banner?

[elo1234]

@Abdosamer 

Yes thats correct

[Abdosamer]

The code I gave you increases the height of this banner.

[elo1234]

@Abdosamer 

It doesnt, it changed the half-banners to wider banners so they are rectangle now instead of square (see pic)

[Abdosamer]

This is how it appears on my phone :

[elo1234]

@Abdosamer 

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

[Abdosamer]

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;
}}

[elo1234]

@Abdosamer 

Still does nothing to the section that i want edited.

[Abdosamer]

Maybe there are some other code overwriting my code, I can send you access request to solve this problem.

[elo1234]

@Abdosamer 

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;

[Abdosamer · 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;
}

}

[elo1234]

worked perfectly thanks so much!