Text on slider Narrative Theme

Highlighted
Tourist
4 0 1

Hello,

 

I would like to lower the text and the button on the slide. Can not find the line of code in the CSS. someone can help me Please :D ?

you can see my slide here : https://ibb.co/gM7D37

I think that it's simple but hard for me! :)

Thakns you

Florian

1 Like
Highlighted
Pathfinder
112 1 28

Hey Florian,

The CSS to edit the text and button is in the theme.scss.liquid file. For the header, the CSS to edit is around line 5918:

.slideshow__text-container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  @include transform(translate3d(0, -50%, 0));
  z-index: $z-index-base + 2;
  width: 100%;
  max-width: 100%;

  .ie9 & {
    @include transform(translate(0, -50%));
  }
}

Change the value of top to change the position of the header.

For the button, that CSS should be around line 6089 in the same file:

.slideshow__button-cta {
  position: absolute;
  left: 50%;
  bottom: -62px;
  @include transform(translateX(-50%));

  @include media-query($medium-up) {
    bottom: (-$gutter) * 3;
  }

  .slideshow__button:not(.slideshow__button--active) & {
    pointer-events: none;
  }

  .slideshow__button--active.slideshow__button--link & {
    bottom: -50px;
    @include media-query($medium-up) {
      bottom: (-$gutter);
    }
  }

  .slideshow__button--active:not(.slideshow__button--link) & {
    bottom: (-$gutter) * 4;

    @include media-query($medium-up) {
      bottom: (-$gutter) * 3;
    }
  }
}

Change the value of bottom to change the positoning.

Let me know if you need more help.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Highlighted
Tourist
4 0 1

Hi!!

Thanks you very much Alex!

It's very appreciate!

Impossible to reduce space betweet title & button. i don't know why. but it's seems impossible!

0 Likes
Highlighted
Highlighted
Pathfinder
112 1 28

If you give me the access password to your store, I can take a look at it for you and figure out what CSS you need to target. Looks like a custom change to the theme.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Tourist
4 0 1

Hi Alex :)

Hope you're fine :)

the password is : cosycoffee

Thanks you very much!!

Florian

0 Likes
Highlighted
New Member
1 0 1

Hi Alex,

 

I'm trying to move down the button in my slideshow, but nothing happens when I change the line bottom: -62px 

 

 i'm using the narrative theme.  Any thoughts?

 

Thank you

1 Like
Highlighted
New Member
10 0 0

Can someone help to move the button closer or wider from the text?

 

Narrative - Button Issue.jpg

0 Likes
Highlighted

Hello @AllanB,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media only screen and (min-width: 750px) {
    .slideshow__text-content .slideshow__heading-cta {
      margin-top: 20px;
 }
 }
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
10 0 0

Thanks, I'm very new to this coding thing.

 

I did find the file and did copy at the bottom. I must have done something wrong.

 

Do you mind explaining in easy terms how to do this exactly? The idea is to move the Header at the bottom with the Button just below it so that I can use maximum space of my header image above.

 

Final question. Can you help me move the text on Gallery down to the bottom?

 

Gallary - Narrative Theme.jpg

Thanks so much.

0 Likes