Reduce padding between slideshow images and title (mobile)

Highlighted
Explorer
80 7 14

In mobile view, the slider-title drops below the slider. There is a padding between the points of the slider <  o o o o   > and the slider-title. And I just can't remove it. I tried many paddings already.

Also, there is a padding of that slider-title to the left, I'd love to have it starting with my image all the way to the left.

Any ideas would be very much appreciated!

I use minimal theme:

menschenskinder-shop.de

password vuffey

0 Likes
Highlighted
Shopify Partner
1644 358 484

HI

Please share your webshop URL & password also send screenshot for me.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Excursionist
19 4 5
.slides__text-content--mobile {
position: absolutez-index: 10000; }
0 Likes
Highlighted
Explorer
80 7 14

@bostondesignz thank you for your help!

Finally I used:

  .slides__text-content--mobile {
position: absolute;
    left: 50px;
  top: 120px;
    z-index: 10000; 
    text-align: center;
    vertical-align: center;
    color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.3)}
0 Likes
Highlighted
Explorer
80 7 14

I changed the code because an unwanted behaviour showed up. The slider title looked good as long as the burger menu is closed. When I opened it, the text stayed where it was and didn't move down with the slider.

So I changed the code to 'relative' and 'top' to a negative value. It looks good, but again, I have the margin / padding between the slider and the featured category. Best to describe it with code and pictures:

.slides__text-content--mobile {
    position: relative;
    left: 10px;
    top: -350px;
    z-index: 100; 
    text-align: center;
margin: 0;
padding: 0; vertical-align: center; color: #FFFFFF; background-color: rgba(0, 0, 0, 0.3)}

nachher3.png

I already tried the margins / paddings I found. I alreads included

  .shopify-section {
    margin-top: 0px;
  }

Any ideas how to reduce that space?

Thank you!!

0 Likes
Highlighted
Explorer
80 7 14

Also, this title "Aktuell beliebt" is moving with the slider title. If the slider title changes from a 2 line text to a 3 line text, the featured category (so beginning with "Aktuell belliebt") is moving down.

My page is (as mentioned in the first post)

menschenskinder-shop.de

password vuffey

I use minimal theme

0 Likes
Highlighted
Excursionist
19 4 5
There seems to be a section that is below the slideshow, it has a height, but it's empty. If you can't see is as a section in customize, you can get rid of it like this:
.slideshow__mobile-text-container { display: none;
0 Likes
Highlighted
Explorer
80 7 14

@bostondesignz 

if I insert

.slideshow__mobile-text-container { display: none;
}

the space below the image disappears, but also the title that is now inside the picture disappears.

I think, what I did, I I took the title, that is moving below the slideshow in mobile view, and pushed it back inside the slider images with ".slides__text-content--mobile {top: -350px;}".

Any ideas how to fix it?

0 Likes
Highlighted
Explorer
80 7 14

@bostondesignz 

I went back to your first solution with z-index and position absolute. It's the only solution that is working to make the title independant of the area below.

But I just can't figure out why the title is above the nav menu. It seems like z-index is not working correctly, or maybe I didn't understand z-index how it works.

  .mobile-nav {
    z-index: 1000; 
    font-family: Monserrat;
    font-size: 20px;
      border-bottom: 1px solid #cbcaca;
    //text-transform: lowercase; 
}
  
    //Slideshow
   .flexslider {
     z-index: 0; 
     width: 100%; 
     margin-top: 0; 
     margin-bottom: 0; 
     padding: 0;
   }
  
  .slides__text-content--mobile {
    position: absolute;
    left: 35px;
    top: 140px;
    z-index: 1; 
    text-align: center;
    vertical-align: center;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.3)}

z-index.png

Any ideas what I'm doing wrong here?

my shop: menschenskinder-shop.de

password vuffey

0 Likes