How do you move the image slider arrows and overlaying text with the Brooklyn theme?

Solved
Highlighted
Excursionist
18 0 0

I have added white space on all sides of the image slider on my homepage (with the help of kind people) but I haven't found a solution to adjusting the slider arrows (what you use to change images or pause) or how to move the text back to the center of the images. You can see how the text and arrows need adjusted on the homepage here:

 

www.doggonetags.com

Password: doggone2019

 

Thank you in advance for your help!

0 Likes
Highlighted

Success.

Shopify Expert
2761 478 619

Hi @thepixelpantry 

You changes some css custom but i can give you fast solution to solve this issue by just console.

follow this:

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

.hero__text-content { top: 16%; vertical-align: unset; }

Note: You an adjust top.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
18 0 0

@Jasoliya Thank you so much - you're brilliant!

0 Likes
Highlighted
Excursionist
18 0 0

@Jasoliya The code you provided me works beautifully on desktop but not on mobile. Do you have to edit the mobile version separately? Thank you!

0 Likes
Highlighted
Shopify Expert
2761 478 619

Hi @thepixelpantry 

In mobile this text is hide, so add this css to show and adjust in mobile screen.

@media screen and (max-width: 768px){
    .hero--adapt .hero__text-align {
         display: block; 
    }
    .hero__slide .hero__title, .hero--adapt .hero__title {
        font-size: 25px;
    }
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
18 0 0

@Jasoliya  I'm sorry, I keep failing to provide enough information.

 

If you view the site on a mobile device, there's a huge gap of white space between the image slider and the page content. My question is, how do I remove the white space gap on mobile devices only? Thank you so much!

0 Likes
Shopify Expert
2761 478 619

Add this css:

#shopify-section-slideshow .hero--adapt .hero-slideshow {height: auto;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
18 0 0

Thank you for your help but the code didn't fix it. :( Here's the code I'm currently using:

 

div#shopify-section-slideshow {
max-width: 80%;
margin: 0 auto; } #shopify-section-slideshow .hero--adapt .hero-slideshow{ height: 500px!important; margin-top: 100px; } .hero__text-content { top: 20%; vertical-align: unset; }

The huge gap is between the image slider and the text overlaying the slider on mobile. (The current code I'm using also makes sizing images EXTREMELY difficult.)

 

Ultimately for both mobile and desktop, I want to be able to:

  • Have white space around the entire image slider
  • See the slider arrows and text overlaying the images
  • Remove gap under slider and page content

Thank you so much for your help @Jasoliya!

0 Likes
Highlighted
Shopify Expert
2761 478 619

Hi @thepixelpantry 

Try this css:

div#shopify-section-slideshow {margin-top: 73px;}
div#shopify-section-slideshow {max-width: 100%; }
#shopify-section-featured-products{margin-top: 0;}
@media only screen and (max-width: 767px) {#shopify-section-slideshow .hero--adapt .hero-slideshow {margin-top: 80px;}}
@media (min-width: 767px){#shopify-section-slideshow .hero--adapt .hero-slideshow {margin-top: 73px;}}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
18 0 0

@Jasoliya Thank you for all of your help! :) I appreciate you!

0 Likes