Recent
Categories
View Replies (6)

Imagehover 100% width not applying in bigger screens

0
Votes
Undo
  1. erikoraka
    erikoraka
  2. Sherlock Holmes
  3. Commercial Templates
  4. Sunday, 06 October 2019
  5.  Subscribe via email
Hello Ciaran,

In the following url http://stavrodromion.org/home-gr, in bottom-1 module, even though I have set the module width to 100%, when I go to bigger screens that my Macbook pro screen, the module does not fill the whole screen from left to right and there is a grey rectangle appearing on the right side.

Please also test by reducing the %zoom of the screen below 100% to see..

I have set the number of columns of the module to 8, which is the number of images I use.

Can you please advise?

Thank you,

Eri
Responses (6)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Eri

By default this module will not display images bigger than their actual size. You can override this by adding the following to the Custom CSS field of your template settings...

[class*=" imghvr-"] > img, [class^="imghvr-"] > img {

    width: 500px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
erikoraka
erikoraka
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

I'm afraid that this is not what I wanted...

I noticed that when I deactivate the following line in bold in the inspect elements window of the page (http://stavrodromion.org/home-gr) then I get the result I want:

@media only screen and (max-width: 1280px) and (min-width: 960px)
.j51imagehover130 .j51imghvr-item {
max-width: 33.333%;
}

I also notice than when I deactivate the line above then the following line in bold is activated:

.j51imagehover130 .j51imghvr-item {
display: inline-block;
max-width: 12.5%;
padding: 0px 0px;
box-sizing: border-box;
}

I believe that the solution might be a combination of the above.. Can you please advise?

Thank you,

Eri
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Eri

Could you please provide a screenshot demonstrating the issue you are having.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
erikoraka
erikoraka
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

I sent the screenshots by email as they exceed 2 MB.

Thank you,

Eri
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Eri

Could you try the following Custom CSS instead... 

[class*=" imghvr-"] > img, [class^="imghvr-"] > img {

    width: 2000px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
erikoraka
erikoraka
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
It works fine now! Thank you!
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!