How to reduce the size of multicolumn - dawn theme

How to reduce the size of multicolumn - dawn theme

KelvinLeow
Excursionist
49 0 15

Hi my multicolumn is looking a bit too big on the desktop where it just fits the whole screen. Is it possible to make it smaller and neater for desktop view?

KelvinLeow_0-1686650269667.png

 

www.fonpintar.myshopify.com

Password: taclau

Replies 11 (11)

Moeed
Shopify Partner
4327 1113 1365

Hey @KelvinLeow 

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 (min-width: 768px) {
ul#Slider-template--19422052843839__ed23233f-a886-47db-a7c7-a3fe5696ffe6 {
    width: 60%;
    margin-left: 350px;
}
}
</style>

 

Moeed_0-1686651297428.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
KelvinLeow
Excursionist
49 0 15

Hi I tried your solution but it didnt change anything 

KelvinLeow_0-1686653036196.png

 

KelvinLeow
Excursionist
49 0 15

Hi Moeed, your code works when I put it in Base.css. It has been working fine, but I just noticed that the tablet view is corrupted. For the current situation im happy with how the desktop view is but what I noticed is that it's not applying to the tablet/ipad.

 

@media (min-width: 750px) {
ul#Slider-template--19422052843839__ed23233f-a886-47db-a7c7-a3fe5696ffe6 {
    width: 60%;
    margin-left: 350px;
}

@media (min-width: 750px) {
ul#Slider-template--19422052843839__2de070ff-624c-49bb-9b2f-9e3538099960 {
    width: 60%;
    margin-left: 350px;
}


Current desktop & mobile view, which im okay with:

KelvinLeow_0-1688980727731.png

 

KelvinLeow_1-1688980727526.png

 

 

View on Tablet/iPad:

KelvinLeow_2-1688980727729.png

 

 

Looking forward to your reply.

Made4uo-Ribe
Shopify Partner
6884 1640 2025

Hi @KelvinLeow ,

I understand that you want to reduce the multicolumn, but I dont know what exact sizes you want you can try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "theme.css, styles.css or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

 

ul#Slider-template--19422052843839__ed23233f-a886-47db-a7c7-a3fe5696ffe6 li {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

 

  • Result:
  • Ribe_Dagandara_0-1686672672638.png
  • I hope it help. 
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
C-O-J
Tourist
16 0 0

None of the solutions offered here helped my case. Does any body find out how to reduce the size of multicolumn???

Made4uo-Ribe
Shopify Partner
6884 1640 2025

Hi @C-O-J 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
C-O-J
Tourist
16 0 0

Hello,

My store is not published yet, but here is the link https://admin.shopify.com/store/6ba227-21/themes

the access code is rewclo

Thank you,

Mahsan

Made4uo-Ribe
Shopify Partner
6884 1640 2025

This is the admin URL. The URL from the preview also work. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
C-O-J
Tourist
16 0 0

Ok. Thank you for letting me know.

 

Made4uo-Ribe
Shopify Partner
6884 1640 2025

For this url i cant check your store. i need another url not this one. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
C-O-J
Tourist
16 0 0

Ok. I wish you would have told me in your first message.

If this one also doesn't help, please guide me where I should get the URL that you can log in. I am new and all the guidance are greatly appreciated.

 

https://cxufaqarividfa25-85834989909.shopifypreview.com