What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Full-Width section on mobile version

Solved

How can I resize my banners for mobile viewing?

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
943 172 198

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
My work

View solution in original post

Abdosamer
Shopify Partner
943 172 198

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
My work

View solution in original post

Abdosamer
Shopify Partner
943 172 198

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
My work

View solution in original post

Replies 24 (24)

topnewyork
Astronaut
763 124 140

hi, Sir

Which theme are you using?

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
topnewyork
Astronaut
763 124 140

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 Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount

Abdosamer
Shopify Partner
943 172 198

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
My work
Abdosamer
Shopify Partner
943 172 198

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
My work
RobArt98
Pathfinder
96 3 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
943 172 198

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
My work
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
943 172 198

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
My work
elo1234
Excursionist
30 0 8

@Abdosamer 

 

Hi,

 

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

Abdosamer
Shopify Partner
943 172 198

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
My work
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
943 172 198

This is the full banner?

Abdosamer_0-1700040769470.png

 

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

@Abdosamer 

 

Yes thats correct

Abdosamer
Shopify Partner
943 172 198

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
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
943 172 198

This is how it appears on my phone :

Abdosamer_0-1700043479491.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
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
943 172 198

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
My work
elo1234
Excursionist
30 0 8

@Abdosamer 

 

Still does nothing to the section that i want edited.

Abdosamer
Shopify Partner
943 172 198

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
My work
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
943 172 198

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
My work
elo1234
Excursionist
30 0 8

worked perfectly thanks so much!