Slider in mobile view

[nomad_jess]

Sorry to bring up this topic again, but I’m getting desperate to find a solution.

The current situation on our site (notesofnomads(dot)com) is that the title text in the slider in mobile view is cut off and the ‘Read more’ button is huge. Because the title text is cut off, the reader can’t see what they are clicking on to read more about.

How can I go about making everything fit on the slider – title and ‘read more’ with adequate margin to not look squished?

Any help would be greatly appreciated.

[Chinmoy Paul]

If I move the post title and read more button below the slide image with black background color then it would be good for you?

[nomad_jess]

Yes, let’s try that option.

Thank you so much!

[Chinmoy Paul]

@media only screen and (max-width: 680px) {
  .flex-caption {
    background: #333;
    padding: 30px 20px 20px
    position: relative!important;
    text-align: left!important;
  }
}

Try this css. Hope that it will solve your requirement.

[nomad_jess]

Thanks for the code. Unfortunately it has deleted the slider images and is just displaying the black box. The black box also has the same formatting issues of the previous slider – text cut off and a huge ‘read more’ button. The black box also seems to be static – just remaining on the one post, rather than rotating between them.

Any help to fix this would be greatly appreciated.

[nomad_jess]

Hi Chinmoy,

Just wondering if there is another solution for this problem? I might just have to delete the slider completely otherwise as having our mobile site looking the way it does at the moment is really affecting our stats.

Any help would be greatly appreciated.

[Chinmoy Paul]

Sorry! I missed “;”

Here is the new code:

@media only screen and (max-width: 680px) {
  .flex-caption {
    background: #333;
    padding: 30px 20px 20px;
    position: relative!important;
    text-align: left!important;
  }
}

[nomad_jess]

Hi Chinmoy,

Thank you for getting back to me. Forgive me, but is there any difference between this code and the previous one you sent me?

[nomad_jess]

Sorry, it’s the extra semi-colon. I see it now.

It seems to have worked. One problem though is that the slider doesn’t slide automatically. If you swipe your finger across it, it will move. But the reader won’t know there are other posts as it appears to be a static image. Is there any way to rectify this?

Thank you so much!

[Author]

Posts