I'm finally very close to launching my site and only have a couple last kinks to work out. As you may recall you had provided some custom css so that the portfolio grid could show as two columns on mobile (which was really clutch in getting the mobile design to work), however it was causing some distortion in the wide / tall thumbnails. I know you were suggesting targeting specific components with an extra class but it seemed it was not working the way we needed it to. Here is the link to the closed ticket and screen shot of the current site:
https://themenectar.ticksy.com/ticket/3582355/#
Can you guys let me know if there is ANYTHING that can be fixed in the code snippet that could fix this so the images will display / stack correctly on tablet?
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
Hey guys...just realizing that while the revised code worked great for the portfolio columns on the tablet, this is somehow preventing my image galleries on all my portfolio pages from showing two columns on mobile. Any thoughts?
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 990px) {
.no-masonry.fullwidth-constrained.portfolio-items .elastic-portfolio-item{
width: 50% !important;
}
}
So this script works to get the image gallery to two columns on mobile, but not for the two columns for portfolio. Seems like the css the team has provided either always works for one, but not the other. I've now got both scripts in and it appears to be working :)
...just wondering if the having the two snippets of css will be problematic. This is what I have:
/* 2 Column on mobile */
@media only screen and (max-width: 990px) {
.no-masonry.fullwidth-constrained.portfolio-items .elastic-portfolio-item{
width: 50% !important;
}
}
@media only screen and (max-width: 990px) {
.portfolio-items .elastic-portfolio-item.regular {
width: 50% !important;
}
}
Let me know if you think this might be problematic...otherwise THANK YOU for the great help!
Hey all...
I'm finally very close to launching my site and only have a couple last kinks to work out. As you may recall you had provided some custom css so that the portfolio grid could show as two columns on mobile (which was really clutch in getting the mobile design to work), however it was causing some distortion in the wide / tall thumbnails. I know you were suggesting targeting specific components with an extra class but it seemed it was not working the way we needed it to. Here is the link to the closed ticket and screen shot of the current site:
https://themenectar.ticksy.com/ticket/3582355/#
Can you guys let me know if there is ANYTHING that can be fixed in the code snippet that could fix this so the images will display / stack correctly on tablet?
Thanks so much!
Hi Eric,
Thank you for getting in touch.
Could you please share the link to the page the with the issue so we can look into this for you?
We look forward to your reply.
Thanks,
Thanks!
Hi Eric,
Thanks for writing back.
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.
Before you provide this information, we strongly recommend taking a backup of your site.
If you have any concerns or questions about this process, please don't hesitate to let me know.
Best regards,
Hey Again,
The Easiest way to fix this is to only resize the regular images on tablet by revising this code below:
@media only screen and (max-width: 990px) { .portfolio-items .elastic-portfolio-item{ width: 50% !important; } }To:
@media only screen and (max-width: 990px) { .portfolio-items .elastic-portfolio-item.regular { width: 50% !important; } }Thanks.
ThemeNectar Support Team
Thanks again guys....Tahir, that worked great. Thanks again for your great support.
Hello Eric,
I'm happy that we could assist you! If you haven't already, please consider sharing your experience by leaving a review on ThemeForest.
Your feedback is valuable to us and greatly appreciated!
Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out.
Best regards,
Will do Judith! Thanks.
Hey guys...just realizing that while the revised code worked great for the portfolio columns on the tablet, this is somehow preventing my image galleries on all my portfolio pages from showing two columns on mobile. Any thoughts?
http://ericrussellphotography.com/staged/portfolio/canvas-label/
Hi Eric,
Thanks for writing back.
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.
Before you provide this information, we strongly recommend taking a backup of your site.
If you have any concerns or questions about this process, please don't hesitate to let me know.
Best regards,
Hey Again,
Please confirm the password?.
Thanks.
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 990px) { .no-masonry.fullwidth-constrained.portfolio-items .elastic-portfolio-item{ width: 50% !important; } }Thanks
ThemeNectar Support Team
Thanks for the quick response Tahir.
So this script works to get the image gallery to two columns on mobile, but not for the two columns for portfolio. Seems like the css the team has provided either always works for one, but not the other. I've now got both scripts in and it appears to be working :)
...just wondering if the having the two snippets of css will be problematic. This is what I have:
/* 2 Column on mobile */
@media only screen and (max-width: 990px) { .no-masonry.fullwidth-constrained.portfolio-items .elastic-portfolio-item{ width: 50% !important; } }
@media only screen and (max-width: 990px) { .portfolio-items .elastic-portfolio-item.regular { width: 50% !important; } }
Let me know if you think this might be problematic...otherwise THANK YOU for the great help!
Hi Eric,
Thank you for getting in touch.
No, having both CSS snippets will not have any effects. You can also add it this way.
@media only screen and (max-width: 990px) { .no-masonry.fullwidth-constrained.portfolio-items .elastic-portfolio-item, .portfolio-items .elastic-portfolio-item.regular { width: 50% !important; } }I hope this info helps.
Regards,
Awesome...thx Andrew.