Slider not working on mobile!

[123JH]

Hello!
Im having prblems with my slider in the footer on the mobile view…It is not allowing me to scroll from the beginning to end , and hides the start of my content.

[Prasant]

Hello Carolina,

Thanks for asking.

I tested the website on my mobile device and on my end slider seems to be working fine and I am able to scroll through the page without any issues. I suggest you to please clear cache and see how it goes. In case problem is still there, please share some screenshot or screencast for us to take a closer look at the issue you are facing.

Thanks.

[jade]

Hi Carolina,

I see what you mean. Please add this code to the Element CSS of the Bar element that contains the inline menu:

@media (max-width: 607px) {
    $el {
        height: auto !important;
    }
}

then add this to the Element CSS of the lnline Menu:

@media (max-width: 607px) {
    $el {
        display: inline-block !important;
        flex: none !important;
        width: 100% !important;
    }

    $el > li, $el > li > a {
        display: inline-block !important;
        flex: none !important;
    }
}

Element CSS | Themeco Docs

Hope this helps.

[123JH]

I just tried putting in the code but I dot know if im putting in the wrong spot or not but it is stacking now

[friech]

Hi Carolina,

Sorry but I don’t see any slider on your footer, please clarify.

Are you referring to the Menu? Please provide us login credentials in a secure note so we can take a closer look.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Thanks,

[123JH]

Hi Friech! Originally i had a lider that wasnt working properly and cut off some of the copy in the beginning of the footer… and i was told to put this code;

@media (max-width: 607px) {
$el {
display: inline-block !important;
flex: none !important;
width: 100% !important;
}

$el > li, $el > li > a {
    display: inline-block !important;
    flex: none !important;
}

}

I put it in but now the slider is gone, to clarify I want the slider back but not cutting off some of the copy that it was originally in the footer

[paul.r]

Hi,

I edited your footer and check all the elements but could not find any slider in there. It seems you have accidentally delete it?

Please add it back so that we will be able to check what is causing the issue.

Thanks

[123JH]

I removed all the code i was given and the slider is back there again, however it is cutting off some of the text on mobile…I was given this code earlier, but it has not worked or i have put it the wrong bar?:

@media (max-width: 607px) {
$el {
height: auto !important;
}
}

then add this to the Element CSS of the lnline Menu:
@media (max-width: 607px) {
$el {
display: inline-block !important;
flex: none !important;
width: 100% !important;
}

$el > li, $el > li > a {
    display: inline-block !important;
    flex: none !important;
}

}

[thai]

Hi There,

I’ve set the height of bar to auto:

Then also changed the Preset to Standard and enabled the Wrap Children option of your navigation inline element:

The menu looks good now on mobile:

Cheers!

[123JH]

That looks great! Thank you, just one more question how do I on mobile only make the © 2019 Hejl Foundation
The Hejl Foundation is a non-profit 501©3 tax-exempt organization. be centered like everything else is in the footer

[rad]

Hi Carolina,

Please add this CSS to your text element’s CSS,

@media (max-width: 767px) {

$el {
text-align: center;
}

}

Again, it should be added on text element’s CSS

Hope this helps.

[123JH]

I tried that but it didnt work…any other suggestions

[ruenel]

Hello Carolina,

Have the code updated and use this:

@media (max-width: 767px) {

  $el.x-text .x-text-content-text-primary {
    text-align: center;
  }

}

Please let us know how it goes.