Hi Rikard,

please see the info in the private section down below..
When you open the web page pay attention to the text on the top of the page as well as menu text, looks kinda strange for some reasons..

Thank you for quick response !

BTW it is Masonry Gallery element… and CSS code is added in General Styling section at the bottom..

Best regards
Amel

Hi again,

I just removed the contact form from the page and re-added it and it seems to be working just fine now, so there is no need for any further troubleshooting on this thread, you can go ahead and close it.

Thank you!

best regards
Amel

Hello,

ok will do, but is there any point to write a new thread for this last question here below ? since it is related ?
Here is the css code I do have from before on:

img.mfp-img {
  padding: 0 !important; 
  margin: 40px auto !important; 
  border: white 1px solid !important; 
}
.mfp-bottom-bar {
  margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
  top: -35px !important; 
}
html {  
  background-color:  #FFFFFF !important 
}

and here is the code you send me in previous post to prevent hover on mobile devices

@media only screen and (max-width: 767px) {
    .image-overlay { 
        display: none !important; 
    }
}

and here below is the results after I added your css on to my existing but it still do not prevents hover on mobile phone, perhaps something is wrong in the syntax in the code below?

img.mfp-img {
  padding: 0 !important; 
  margin: 40px auto !important; 
  border: white 1px solid !important; 
}
.mfp-bottom-bar {
  margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
  top: -35px !important; 
}
html {  
  background-color:  #FFFFFF !important 
}
@media only screen and (max-width: 767px) {
    .image-overlay { 
        display: none !important; 
    }
}

thank you

Best regards
Amel

Hello,

thank you for reply and helping! I see it now and I understand… will make those changes ..

Best regards
Amel

Hello,

but can you than explain me why this works for other Enfold layouts ? because in other layout on the desktop when I move the mouse over the image it animates either greyes out or pops up depending on the setup but on the mobile phone the image is displayed nice and clean not greyed out not poped up as it is on the desktop pc when I move the mouse over but displayed as a normal image… how can this work than ?

But is it possible to reconfigure the it so I make one theme for mobile devices tablets etc.. and one for desktop then I can configure the server to send the traffic that came from mobile devices to mobile based site where all “hover” are disabled and the traffic directed from desktops redirect them to desktop based theme which is normal and keeps the hover functions ?

thank you
Best regards
Amel

Hello,

ok, thank you for helping, it works just fine!

Best regards
Amel

Hello,

ok, thank you for the reply. I do not like Masnory styled layout that is the main reason why I do prefer 1:1 for thumbnails..
But can I use “Masnory” and modify it to be 1:1 in that case perhaps ?

Best regards
Amel

Hello,

no prob, it´s ok, seems to be working fine now yes, is it possible to get these thumbnails in 1:1 format ? 100% square ? and locked thumbnail image size so they not get bigger when user maximises the browser window ?

Thank you for helping !!

Best regards
Amel

Hello,

thank you for the reply. It`s not working just tried to modify the code, and this is how the code looks like now, maybe I did something wrong, NOTE there is also other CSS that are modified and in use so your suggestion is located at the bottom of the code:

The code is added in “General Styling” – “Quick CSS”

img.mfp-img {
    padding: 0 !important; 
    margin: 40px auto !important; 
    border: white 2px solid !important; 
}
.mfp-bottom-bar {
    margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
    top: -35px !important; 
}
html {  background-color:  #FFFFFF !important }
}
.grid-entry {
	padding: 10px;
}

What I want here is 2 things:

1. make spacing between images yes just as you understood
2. but also make those images 1:1 square thumbnails and add some fixed size so images do not spread over the entire window when user maximizes the browser window.

Best regards
Amel

• This reply was modified 4 years, 8 months ago by AmelC.

Hello,

thank you for reply!
Have added the code, works fine now.

You can just close this thread.

Best regards
Amel

Hello Victoria and thank you for the reply.

please see login credentials in the Private Content section..

Best regards
Amel

Hello,

ok, you can just go ahead and close this thread..

thank you for helping!

Best regards
Amel

adding code directly on to css solved my problem, however I got a message once I added this piece of code and saved it:

“These options are only available if you select the ‘boxed’ or ‘framed’ layout. Your currently have a different layout selected
You can change that setting at General Layout”

But it work for me now in stretched mode as well so it is ok, I am fine with it.
Consider this thread as solved and feel free to close it!

Thank you for helping!

Best regards
Amel

Hello,

but changing layout will change entire theme look it will not stretch over the entire screen anymore in this case if I am correct ? I would not like to have this theme on the middle of the screen or fixed in any way because this will reduce the size… correct me if I am wrong… It is stretched layout I like best ..

Thank you
Best regards
Amel