Sydney Theme Home Slider Text Responsive Problem

#1

Hi,

im trying to fix a responsive problem that occurred after using this code to move the text position in the home header slider.

    .home .slide-inner {
        top: 55%;
    }

I what the text in Pc version to be a little bit up and in the mobile version to be inside the home slider (now it is beneath it).

I appreciate any help.

#2

Hello there,

Try this CSS code:

    @media only screen and (max-width: 800px) {
      .home .slide-inner {
        top: auto;
        bottom: 20px;
        -webkit-transform: translateY(-50%);
      	-moz-transform: translateY(-50%);
      	-ms-transform: translateY(-50%);
      	-o-transform: translateY(-50%);
      	transform: translateY(-50%);    
      }
    }

Regards,
Kharis

#3

Hi,

Thanks! it work!

I just had to do some adjustment on some lines.

Here is the final code:

@media only screen and (max-width: 800px) {

.home .slide-inner {

top: auto;

bottom: 270px;

-webkit-transform: translateY(-80%);

-moz-transform: translateY(-80%);

-ms-transform: translateY(-80%);

-o-transform: translateY(-80%);

transform: translateY(-80%);

}

}

Thanks a lot!

#4

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

#5

Hi, sorry to open this topic again but im still having problems with the position of the slide container from the home page in the mobile, tablet and desktop version.

im using the same code us before but it looks like i make some mistake with it know.

Thanks

#6

Hello there,

Do you have a link to your site to share here, so I can check and troubleshoot it with my web browser?

Regards,
Kharis

#7

Hi yes!

www.altosdepanqui.cl

#8

Hello there,

Thank you for sharing. Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 1024px) {
  .home .slide-inner {
    top: 40%;        
    -webkit-transform: translateY(-40%);
  	-moz-transform: translateY(-40%);
  	-ms-transform: translateY(-40%);
  	-o-transform: translateY(-40%);
  	transform: translateY(-40%);   
  }
}

and disable negative margin 300px (-300px) that applied in the first elementor row content.

Regards,
Kharis