So I'm wondering if you can help me with a questions in regards to the responsive adjustments for both the portfolio and image galleries primarily as they adjust for tablets.
Portfolio:
As it is, by default the portfolio grid is set to 5 columns (which of course you can force the portfolio grid to a max of 4 if you'd like too). I'm wondering if it's possible to set the amount of columns to lets say 5 for Small Desktop (it currently defaults to 3), and say to 4 columns for Tablet Portrait (it currently defaults to 2 columns).
Additionally, I'm noticing that when I've got a featured thumbnail that is set to wide (so it technically occupies 2 columns horizontally, that the image in the 2 and 3 column tablet view gets squished horizontally (see screenshots) instead of restocking like it does in 2 (phone) or 5 columns layouts.
Similarly, I'm wondering if you could set the image galleries to stay at 4 columns for tablet landscape or 3 columns tablet portrait which can be seen live here.
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. I'm aware of what can be done with the column adjustments here and will do my best to figure it out, but if someone could please address the horizontal images distorting (as shown) I would really appreciate it.
Thanks for the quick response Tahir. Yes, that IS what is causing the issue. So this is the custom CSS you had provided to make it so the image gallery had 2 columns on mobile in this ticket:
Is there a way to accomplish the gallery displaying 2 columns on mobile by using the response settings in the column table instead of using the custom css to accomplish this or will it require revising the css so it doesn't skew the images on tablet?
Thanks...so I've added the Extra Class 'two-column-on-mobile' into the inner column of the row with the portfolio grid on the homepage, but as you can see with my limited understanding of CSS I'm getting two errors pertaining to the brackets. Can you let me know if I'm doing this correctly and help me correct the CSS?
Also, even though this will prevent the code applying to the entire site, however... I'm realizing I'm putting this into the column containing the portfolio section where the images are squishing on tablet so even if we get the css correct and it won't create the problems with the other sections, won't this just cause the same problems with the actual section where the code is creating the problem?
Thank you for your patience in getting this sorted out.
Try adding it like this, if it does not work please provide the page url where you have added the extra class?.
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) {
.two-column-on-mobile .portfolio-items .elastic-portfolio-item {
width: 50% !important;
}
}
Appreciate you correcting the css. While this method works to isolate the 2 column function to a specific gallery or portfolio, the portfolio grid which is on my homepage is one of those that I want to show as a two column on mobile and I've confirmed the problem of the images squeezing horizontally still exists on tablet (portrait). Is there not a simpler way to accomplish assigning the amount of columns from the responsive settings tab? While I see how useful it could be, I JUST have not been able to have it accomplish what I'm after. For instance if I wanted to the portfolio grid on my homepage to show 6 columns on desktop, 4 columns on tablet (landscape and portrait) and 2 on mobile you can how with what I would THINK would be the right settings I neither get the right amount of columns and everything shifts left:
Desktop:
Tablet (Landscape):
Tablet (Portrait):
Mobile (Portrait):
Again, I'm sorry to persist...it just seems like there would be an easy way to fix this, OR most likely I'm just doing something dumb.
Thanks once again for any specific assistance you can offer to get me there.
Hey guys...
So I'm wondering if you can help me with a questions in regards to the responsive adjustments for both the portfolio and image galleries primarily as they adjust for tablets.
Portfolio:
As it is, by default the portfolio grid is set to 5 columns (which of course you can force the portfolio grid to a max of 4 if you'd like too). I'm wondering if it's possible to set the amount of columns to lets say 5 for Small Desktop (it currently defaults to 3), and say to 4 columns for Tablet Portrait (it currently defaults to 2 columns).
Additionally, I'm noticing that when I've got a featured thumbnail that is set to wide (so it technically occupies 2 columns horizontally, that the image in the 2 and 3 column tablet view gets squished horizontally (see screenshots) instead of restocking like it does in 2 (phone) or 5 columns layouts.
Similarly, I'm wondering if you could set the image galleries to stay at 4 columns for tablet landscape or 3 columns tablet portrait which can be seen live here.
Thanks for all help guys!
Hi Eric,
Thanks for writing to us.
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,
Hi Eric,
Thanks for writing back.
I would request you adjust the columns using this guide: https://themenectar.com/docs/salient/page-builder-columns/#width This will help you adjust the settings to your liking.
Should you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hey guys. I'm aware of what can be done with the column adjustments here and will do my best to figure it out, but if someone could please address the horizontal images distorting (as shown) I would really appreciate it.
Hey Again,
This Custom CSS is causing the distortion:
Thanks.
ThemeNectar Support Team
Thanks for the quick response Tahir. Yes, that IS what is causing the issue. So this is the custom CSS you had provided to make it so the image gallery had 2 columns on mobile in this ticket:
https://themenectar.ticksy.com/ticket/3565964/
Is there a way to accomplish the gallery displaying 2 columns on mobile by using the response settings in the column table instead of using the custom css to accomplish this or will it require revising the css so it doesn't skew the images on tablet?
Thanks in advance!
Hey Again,
Try setting an Extra Class to the Row/Column and use that in the CSS selector so it does not apply on each gallery.
Thanks.
ThemeNectar Support Team
Thanks...so I've added the Extra Class 'two-column-on-mobile' into the inner column of the row with the portfolio grid on the homepage, but as you can see with my limited understanding of CSS I'm getting two errors pertaining to the brackets. Can you let me know if I'm doing this correctly and help me correct the CSS?
Also, even though this will prevent the code applying to the entire site, however... I'm realizing I'm putting this into the column containing the portfolio section where the images are squishing on tablet so even if we get the css correct and it won't create the problems with the other sections, won't this just cause the same problems with the actual section where the code is creating the problem?
Thank you for your patience in getting this sorted out.
Hey Again,
Try adding it like this, if it does not work please provide the page url where you have added the extra class?.
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) { .two-column-on-mobile .portfolio-items .elastic-portfolio-item { width: 50% !important; } }Thanks
ThemeNectar Support Team
Thanks Tahir,
Appreciate you correcting the css. While this method works to isolate the 2 column function to a specific gallery or portfolio, the portfolio grid which is on my homepage is one of those that I want to show as a two column on mobile and I've confirmed the problem of the images squeezing horizontally still exists on tablet (portrait). Is there not a simpler way to accomplish assigning the amount of columns from the responsive settings tab? While I see how useful it could be, I JUST have not been able to have it accomplish what I'm after. For instance if I wanted to the portfolio grid on my homepage to show 6 columns on desktop, 4 columns on tablet (landscape and portrait) and 2 on mobile you can how with what I would THINK would be the right settings I neither get the right amount of columns and everything shifts left:
Desktop:
Tablet (Landscape):
Tablet (Portrait):
Mobile (Portrait):
Again, I'm sorry to persist...it just seems like there would be an easy way to fix this, OR most likely I'm just doing something dumb.
Thanks once again for any specific assistance you can offer to get me there.
Hey Again,
I am afraid the Column Setting dont get applied to dynamic elements such as Portfolio or Image Galleries as the HTML Markup is different.
Let us know what trouble you are having with using the Extra Class and Custom CSS to target individual page elements so we can suggest further?.
Thanks.
ThemeNectar Support Team