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

[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

[Abdosamer]

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]

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