[spoonandfork]

Hi,

The text associated to my homepage slide is not scaling when the page is viewed on smaller screens. Instead the text box scales while the text itself stays the same size causing it to overlap the logo and navigation. Is there a fix for this?

Thanks!

[Juanfra Aldasoro]

Hi There,

Thanks for writing. We’ve been reviewing your problem and it seems to be a problem with the flexslider script when there’s only one slide. To solve the problem then, if you want or need to add more slides it’ll look as expected.

The second option is adding some custom CSS over your file custom.css:

You need to add the following code:

@media screen and (max-width: 860px) {
  .flex-caption { display: none; }
}

Best,
Juan.

[spoonandfork]

Thanks for the reply. I added the suggested code into the custom.css however it is still not quite working properly. I am unsure of what I may have done wrong.

[Juanfra Aldasoro]

Hi There,

Have you added some styles or touched the file styles.css before?

Best,
Juan.

[spoonandfork]

Hi Juan,

No we have not. We used the theme editor to make any customization.

[Juanfra Aldasoro]

Hi,

Ok – but did you make any edit through the theme editor over the styles file? What is that you did?

Thank you,
Juan.

[spoonandfork]

Colors and logo. That’s about it.

[Juanfra Aldasoro]

Oh, ok – great.

Would you please this new CSS tweak:

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

.flex-caption {
    display: none;
}
.flexslider .slides li:first-child:nth-last-child(1) .flex-caption, .flexslider .slides li:only-child .flex-caption {
    display: none;
}
}

Try to replace the old code I’ve sent you with this new one.

Thank you,
Juan.

[spoonandfork]

That worked! Thank you so much for your help!

[Juanfra Aldasoro]

No problem 🙂

Have a nice day,
Juan.