Title: Responsive Title Display on Thumbnails
Last modified: August 30, 2016

---

# Responsive Title Display on Thumbnails

 *  Resolved [noobhome](https://wordpress.org/support/users/noobhome/)
 * (@noobhome)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-title-display-on-thumbnails/)
 * Hi!
 * I’m using the latest version of Envira plugin.
 * After creating my gallery, I followed [this guide](https://enviragallery.com/docs/display-image-titles-thumbnails/),
   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/](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/](https://wordpress.org/plugins/envira-gallery-lite/)

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

 *  [Tim](https://wordpress.org/support/users/n7studios/)
 * (@n7studios)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-title-display-on-thumbnails/#post-6678293)
 * 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](https://wordpress.org/support/users/noobhome/)
 * (@noobhome)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-title-display-on-thumbnails/#post-6678297)
 * 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](http://aluminiosmoraglass.es/cataleg-de-productes/).
 * 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](https://wordpress.org/support/users/n7studios/)
 * (@n7studios)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-title-display-on-thumbnails/#post-6678334)
 * 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.

 * ![](https://ps.w.org/envira-gallery-lite/assets/icon-256x256.png?rev=2022837)
 * [Envira Gallery - Image Photo Gallery, Albums, Video Gallery, Slideshows & More](https://wordpress.org/plugins/envira-gallery-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/envira-gallery-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/envira-gallery-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/envira-gallery-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/envira-gallery-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/envira-gallery-lite/reviews/)

## Tags

 * [display](https://wordpress.org/support/topic-tag/display/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)
 * [title](https://wordpress.org/support/topic-tag/title/)

 * 3 replies
 * 2 participants
 * Last reply from: [Tim](https://wordpress.org/support/users/n7studios/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-title-display-on-thumbnails/#post-6678334)
 * Status: resolved