Responsive Title Display on Thumbnails

Resolved noobhome
(@noobhome)

10 years, 7 months ago

Hi!

I’m using the latest version of Envira plugin.

After creating my gallery, I followed this guide, so that I could activate the title display under each image thumbnail.

Then I edited the CSS and it worked perfectly. Here’s the result: http://aluminiosmoraglass.es/cataleg-de-productes/

My problem now is the responsiveness of that title. When I reduce the window, the image becomes smaller but the title doesn’t follow the same rule, and it unfits in most of the reduced screens.

So, is there a way to fix the responsive settings of the title display so that it gets totally linked with the image?

Thank you very much for your time.

https://wordpress.org/plugins/envira-gallery-lite/

Viewing 3 replies - 1 through 3 (of 3 total)

Tim
(@n7studios)

10 years, 7 months ago
Hi,

You’d need to add a CSS media query to reduce the font size of the titles depending on the screen resolution. For example:
```
@media screen and (max-width: 600px) {
   #envira-gallery-83 .envira-gallery-item span.title {
   	font-size: 12px;
   }
}
```
Thread Starter noobhome
(@noobhome)

10 years, 7 months ago
Hi!

I understand what you mean, but it didn’t work.

When I use your CSS media query, titles would turn into font-size: 12px at some point, but they’re just at sizes 160% or 12px. The fact is that some zooms doesn’t fit with this sizes, it should be “a progressive” decrease in the title size.

I applied your CSS to the page so that you can test it.

This is the actual CSS being used:
```
#envira-gallery-83 .envira-gallery-item span.title {
   text-align: center;
   display: block;
   position: relative;
   bottom: 100px;
   font-family: "Open Sans",sans-serif;
   color: white;
  font-size: 160%;
}

@media screen and (max-width: 600px) {
   #envira-gallery-83 .envira-gallery-item span.title {
   	font-size: 12px;
   }
}
```
Thank you very much for your time! Wait for ur answer.
Tim
(@n7studios)

10 years, 7 months ago
If you require a more progressive approach to font sizing, you’re welcome to use percentages, ems or rems, and add more media queries as necessary for a greater range of step sizes. Example:
```
@media screen and (max-width: 600px) {
   #envira-gallery-83 .envira-gallery-item span.title {
   	font-size: 1.2em;
   }
}
@media screen and (max-width: 500px) {
   #envira-gallery-83 .envira-gallery-item span.title {
   	font-size: 1.1em;
   }
}
@media screen and (max-width: 400px) {
   #envira-gallery-83 .envira-gallery-item span.title {
   	font-size: 1em;
   }
}
```

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive Title Display on Thumbnails’ is closed to new replies.

Tags