Solved

Full-Width section on mobile version

elo1234
Excursionist
30 0 8

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

 

123x.jpg

 

12345.jpg

 

Accepted Solutions (3)

Abdosamer
Shopify Partner
820 146 161

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;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

View solution in original post

Abdosamer
Shopify Partner
820 146 161

This is an accepted solution.

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

View solution in original post

Abdosamer
Shopify Partner
820 146 161

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

}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

View solution in original post

Replies 24 (24)

topnewyork
Trailblazer
212 25 27

hi, Sir

Which theme are you using?

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
topnewyork
Trailblazer
212 25 27

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>

 

 

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

Abdosamer
Shopify Partner
820 146 161

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;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
Abdosamer
Shopify Partner
820 146 161

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

.row.empty_space{
 height:0 !important;

}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
RobArt98
Pathfinder
93 4 14

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

Bildschirmfoto 2023-11-15 um 09.36.32.png

elo1234
Excursionist
30 0 8

@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, 123x.jpg

Abdosamer
Shopify Partner
820 146 161

This is an accepted solution.

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@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
Shopify Partner
820 146 161

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@Abdosamer 

 

Hi,

 

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

Abdosamer
Shopify Partner
820 146 161

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

}

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@Abdosamer 

 

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

Abdosamer
Shopify Partner
820 146 161

This is the full banner?

Abdosamer_0-1700040769470.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@Abdosamer 

 

Yes thats correct

Abdosamer
Shopify Partner
820 146 161

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@Abdosamer 

 

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

 

jg.jpg

Abdosamer
Shopify Partner
820 146 161

This is how it appears on my phone :

Abdosamer_0-1700043479491.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@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

 

 

1232123132.jpg

 

Abdosamer
Shopify Partner
820 146 161

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

 

 



Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@Abdosamer 

 

Still does nothing to the section that i want edited.

Abdosamer
Shopify Partner
820 146 161

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

@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
Shopify Partner
820 146 161

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

}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
elo1234
Excursionist
30 0 8

worked perfectly thanks so much!