Would like to adjust the rollovers for mobile. Would like the overlay and text to display on mobile in first instance, then disappear to display the image when tapped (reverse of desktop) - how can I achieve this.
Would also like to reduce the site padding (left and right) on while mobile site so images display larger in portfolios.
Ok, we need media queries here, therefore operate with screen widths:
try adding this code in theme options -> styling options -> custom css:
@media (max-width: 767px){
.item:hover .item-overlay {
background: rgba(0,0,0,0.0);
opacity: 0;
}
.item:hover .item-title{
margin-left: -100%
}
.item-overlay {
background: rgba(0,0,0,0.8);
opacity: 1;
}
.item-overlay {
margin-left: 28px;
}
}
regarding the portfolio margins same thing applies except that the widths are calculated dynamically in /js/scripts.js in function MasonryPortfolio()
you will see that each threshold is treated separatelt so you will need to m0dufy it for 767, 479 and less than 479 for #portfolio-wrap, .item, .item.wide, .item.tall and .item.wide-tall
Would like to adjust the rollovers for mobile. Would like the overlay and text to display on mobile in first instance, then disappear to display the image when tapped (reverse of desktop) - how can I achieve this.
Would also like to reduce the site padding (left and right) on while mobile site so images display larger in portfolios.
Thank you!
Ok, we need media queries here, therefore operate with screen widths:
try adding this code in theme options -> styling options -> custom css:
@media (max-width: 767px){
.item:hover .item-overlay {
background: rgba(0,0,0,0.0);
opacity: 0;
}
.item:hover .item-title{
margin-left: -100%
}
.item-overlay {
background: rgba(0,0,0,0.8);
opacity: 1;
}
.item-overlay {
margin-left: 28px;
}
}
regarding the portfolio margins same thing applies except that the widths are calculated dynamically in /js/scripts.js in function MasonryPortfolio()
you will see that each threshold is treated separatelt so you will need to m0dufy it for 767, 479 and less than 479 for #portfolio-wrap, .item, .item.wide, .item.tall and .item.wide-tall
Hope it works, but these are the guidelines
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Thanks!
The mobile css hasn't quite worked take a look at screenshot. Overlay is great - but titles aren't showing correctly, not at all on some.
A speedy response would be appreciated! Have removed the code for now. Will an admin login help?
Fixed it now thanks :)
Yes the last CSS instruction should have been
.item .item-title {
margin-left: 28px;
}
I mistakenly copied and pasted the CSS selector.
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio