Making plugin responsive

[c14r4n]

HI All,

This is my first ever post on a forum, so I apologize if I am putting this message in the wrong place!

I have created a website and went with the customizr theme as its responsive on all media devices.

However I found a plugin that does exactly what I want (When you hover over an image, the descriptive text is shown below the image), this plugin can be found at https://www.nosegraze.com/image-hover-effect-wordpress/

How do I make this plugin responsive? When I use it on my laptop it works perfectly, but when my page is viewed on a mobile phone the widths of the descriptive text are too wide and there seems to be a larger gap between two of the photos.

My site: http://www.mayspeak.es (Still under construction!)

I am a complete newbie to all this, so please can you answer in simple terms!!

Many thanks,

.ng-image-hover {
display: inline-block;
position: relative !important;
}

.ng-image-hover img {
cursor: pointer ;
}

.ng-image-hover:hover .ng-image-hover-text {
display: block; /* Display the text */
}

.ng-image-hover-text {
background: #27CBCD;
border: 1px solid #d2d2d2;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
display: none; /* Hide the text */
width: 335px;
max-height: 100%;
overflow-y: 0;
padding: 1em;
position: below;
top: 0;
left: 100%;
}

/*# sourceMappingURL=ng-image-hover.css.map */

[Shikkediel]

Wow, that’s a long page for a simple effect. I don’t see it anywhere on your site though.

[c14r4n]

It’s on the business section (the second page on the site). I have three images in the center of the page. (Maybe there is a simple plugin I can use instead, but can’t find any). The main reason why I’m using this method is not to have too much text on the page and make sure that whatever I use works across all platforms. Many thanks for any help!

[Author]

Posts