Adjust slider dots on mobile only debut theme

Mareka
Trailblazer
209 1 27

Hi All,

Can anyone help with moving the slideshow dots & arrows on mobile only for debut theme ? Desktop version is all good but on mobile, the dots/arrow section cuts into the bottom of the image which looks silly. Can these be moved to below the image while still keeping the title & sub-title please ? I am currently working on a draft copy of my store treasureknot.com (https://0yoezbtx6v0nrqes-34503295108.shopifypreview.com)

mobile slide.JPG

I also have a problem with my home page collections section on mobile only. As you can see from the attached, the title the first collection (jewellery) is missing. 

collection mobile.JPG

 

 

KetanKumar
Shopify Partner
20662 2144 7829

@Mareka 

sorry for that issue please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {top: 0;}
.collection-grid .grid__item {margin-bottom: 50px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Mareka
Trailblazer
209 1 27

@KetanKumar I am getting an error message when I try to save

KetanKumar
Shopify Partner
20662 2144 7829

@Mareka 

what's error please show me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
LitExtension
Shopify Partner
1247 162 220

Hi @Mareka

Please follow the steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > theme.css and paste this at the bottom of the file: https://i.imgur.com/7tm96JA.png

@media only screen and (max-width: 749px){

  // slideshow

  .slideshow__text-wrap--mobile {

    top: 0 !important;

  }

  // collections section

  .collection-grid-item{

    margin-bottom: 55px !important;

  }

}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes