Text shows below slideshow in Simple theme on phone

Technical Q&A
1

i’ve tried this code but it looks bad on my site

@media screen and (max-width: 767px) { .index-section.slideshow-container {
	position: relative;
}
.slideshow__mobile-text-container {
	position: absolute;
	top: 32%;
	z-index: 999;
	left: 0;
	right: 0;
	background: #000;
	opacity: .6;
}
.slideshow__mobile-text-container h2 {
	color: #ffffff;
	width: 100% !important;
}}

my website is https://www.dubuystore.com/

2

Hello!

Are you looking for the slideshow text to appear on the image for mobile as well? Or are you simply looking to clean up the styling for when it pushes below the image?

3

I’m trying to put the text on the slideshow when i view it from my phone.

The same way it shows on desktop.

On phone the text shows below the slide not on it.

4

So the easiest way to do this would be the following:

@media screen and (max-width: 767px;) {
  .slides__text-content--mobile {
   display: block;
   margin-top: -250px;
   }
 .slideshow__mobile-text-container {
    margin-top: -250px;
    padding-bottom: 100px;
    }
  .slides__title--mobile {
    color: #fff;
  }
}

This will do the trick, however, its a sloppy solution.

If you would like, I can send you over a collaborator request and clean it up properly for you.

There are some div elements that simply need to be rearranged.

Send me over a message if you want to discuss more :slightly_smiling_face:

5

the website crashes when i paste the code at the end of theme.scss.liquid

6

I just sent you over a PM

7

i can’t find it