Responsive text isn't working(((((

Have site. http://sw13.classicalmusic.by/
When make it responsive, text become hidden.

image.jpg

Screen, where text is hidden.

image.png

Can’t find CSS rules, that can fix It.

It’s working fine, but one of the parent containers has a specific height and overflow:hidden set.

So when you make the width smaller, the space available for the text compresses horizontally. The text itself stays the same size, but now some of it is outside the area you have available, and because overflow is set to hidden, it gets hidden.

The problem is, you cannot remove the set height or remove the overflow:hidden, because this is a carousel and it needs those two things, otherwise it will break. So you have a few choices:

  1. use a media query to change the height at smaller screen sizes.
  2. have less text (either less text full stop, or you hide some of it at smaller sizes using a media query).
  3. use a media query to make the text smaller at smaller sizes.

edit: sorry, didn’t see the link. Same applies, auto height might work, as @Nebula says, but you need to test it because generally you want carousels to have a set height. Ideally, you should really avoid putting lots of text content in a carousel because a. you’ll get these issues, and b. it’s fairly pointless because it moves, and generally no-one will read it, they’ll just ignore it (it’s a carousel, no one looks at them)

1 Like

The problem is most likely in the carousel, because when you put auto height on the .nivo-caption, everything works fine, but if you make the size even smaller, the text goes under the menu header.

1 Like