How to small the brand slider image in mobile view using ella theme.

[Asad712]

Hi ,

      I recently working on brand slider using ella theme the issue is solved in Laptop view but not check in mobile view now check in mobile view the images are large. Is their another code is required for it?
Thank you

[BSS-TekLabs · Accepted solution]

<style>
@media (max-width: 551px) {
    main .brand-slider .brand-layout--infinite.sm-column-1 .halo-item {
        width: 130px !important;
    }
}
</style>

[Moeed]

Hey @Asad712 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Asad712]

PREVIEW LINK
https://a68qc6kuhm4l6fpa-57675972670.shopifypreview.com

[Moeed]

Hey @Asad712 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.brand-slider .brand-layout--infinite.sm-column-1 .halo-item {
     width: 35vw !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Asad712]

it not work and i delete the previous code 

https://a68qc6kuhm4l6fpa-57675972670.shopifypreview.com

Previous code
<style>
.brand-slider .halo-row.brand-layout--infinite .halo-item {
width: 160px !important;
}
</style>
in this code mobile view has issue only

[Sangeetanahar]

hello @Asad712 

can you please share your Website URL
thanks

[Gul2024]

Any solution regarding this issue

[BSS-TekLabs · Accepted solution]

<style>
@media (max-width: 551px) {
    main .brand-slider .brand-layout--infinite.sm-column-1 .halo-item {
        width: 130px !important;
    }
}
</style>

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Asad712 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media (max-width: 551px) {
    main .brand-slider .brand-layout--infinite.sm-column-1 .halo-item {
        width: 130px !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Asad712]

Thank you for it works
This code actually worked 👍

<style>
@media (max-width: 551px) {
main .brand-slider .brand-layout--infinite.sm-column-1 .halo-item {
width: 130px !important;
}
}
</style>