Adjust slider dots on mobile only debut theme

Mareka
Trailblazer
232 2 39

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

 

 

Replies 4 (4)

KetanKumar
Shopify Partner
36839 3635 11972

@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
Mareka
Trailblazer
232 2 39

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

KetanKumar
Shopify Partner
36839 3635 11972

@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

LitExtension
Shopify Partner
4860 1001 1132

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
Check out our Shopify migration app to migrate your online store to Shopify