Hi guys...have absolutely loved the Salient Theme and excited to get the new website launched quickly and would really love some help wrapping up a few technical issues particularly with the responsive settings.
I'm using an image gallery in a section and have it set to 'contained fullwidth' to accomplish the nice 4 column grid with zero space between the square thumbnails. When I simply size down my window its adjusts responsibly exactly how I'd want showing two columns, however even with messing around with the responsive settings in the column settings I cannot for the life of me get this to show in two columns on mobile. Please see comparison images.
I have seen that you have directed people with the same question to the responsive adjustments section in your guide:
but either I'm just not getting it or something is just not working for me. I'm certain this is something I'm just over looking...but could you pls take a look at web page I've referenced and the referenced screen shots and tell me how I might be able to accomplish this pls?
Thanks in advance for all your help and for the incredible theme.
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) {
.portfolio-items .elastic-portfolio-item {
width: 50% !important;
}
}
Thank you kindly Tahir. This appears to working great. My only question is that I seem to be seeing little pixel gaps in the thumbnails. Not anything to stress too much about, but let me know if there is something in the code creating this.
Also, I'm attempting to do the same with self hosted videos placed in a 4 column section on this page. Is this possible to carry over as well there too?
Thanks for referring me to this section which you've referred others to..however, I like them are really still struggling as either I'm just doing something wrong or it's just not really as intuitive I would think it could be. Pls see the following attachments...
On this page, If I create a 4 column row and assign the 4 column mobile response settings, while it retains the 4 columns the section is not centered the way I want it to be. If create a two column row and assign the two column to the mobile settings it also retains the two columns (I've left both sections active for you to see) but also is off center. I'm not sure I understand why it won't remain centered and certainly understand that is why you would have the offset settings...but everytime I select what I would think would be an offset value that would work (including the percentages) everything goes weird (see attachment). If I want this to stay as a 4 or 2 column on mobile, should I select a 4 or 2 column offset?
I'm sorry if I'm missing something obvious and to be so persistent about this, but it just seems this should be an easy format to build and maintain responsively. As you can see below the custom code you provided to have the image gallery show in 2 columns worked perfectly, but its just seems no matter what I do I cannot get these column responsive settings to work for this section. Any specific help would be so appreciated.
As for the gallery style...the other styles do not work for what I'm trying to accomplish so if you know of anyway to prevent the little gaps from occurring I'd sure appreciate it.
Awe...think I had things backwards on the two column build...as for the 4 column build, it's a little weird that the responsive settings by default are 3 columns - 1/4 and need to be set to that to get the 2 columns on mobile (perhaps the confusion comes from my linear thinking that 3 columns would be 1/3 and 4 columns would be 1/4) but moving forward I'll make sure they are set to the same so there aren't any weird offsets!
Appreciate the assistance of the support team to help us get this over the line!
Hi guys...have absolutely loved the Salient Theme and excited to get the new website launched quickly and would really love some help wrapping up a few technical issues particularly with the responsive settings.
I'm using an image gallery in a section and have it set to 'contained fullwidth' to accomplish the nice 4 column grid with zero space between the square thumbnails. When I simply size down my window its adjusts responsibly exactly how I'd want showing two columns, however even with messing around with the responsive settings in the column settings I cannot for the life of me get this to show in two columns on mobile. Please see comparison images.
I have seen that you have directed people with the same question to the responsive adjustments section in your guide:
https://themenectar.ticksy.com/ticket/2894629/
https://themenectar.ticksy.com/ticket/3563029/
but either I'm just not getting it or something is just not working for me. I'm certain this is something I'm just over looking...but could you pls take a look at web page I've referenced and the referenced screen shots and tell me how I might be able to accomplish this pls?
Thanks in advance for all your help and for the incredible theme.
Attached files: SalientThemeSupport-2ColumnExample.jpg
SalientThemeSupport-Mobile1ColumnIssue.PNG
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) { .portfolio-items .elastic-portfolio-item { width: 50% !important; } }Thanks
ThemeNectar Support Team
Thank you kindly Tahir. This appears to working great. My only question is that I seem to be seeing little pixel gaps in the thumbnails. Not anything to stress too much about, but let me know if there is something in the code creating this.
Thanks again!
Attached files: SalientThemeSupport-2ColumnGaps-1.jpg
SalientThemeSupport-2ColumnGaps-2.jpg
Also, I'm attempting to do the same with self hosted videos placed in a 4 column section on this page. Is this possible to carry over as well there too?
Thanks!
Attached files: IMG_5281.PNG
Hey Again,
For the Video's you can adjust the Column Widths using the Responsive Options in here: https://themenectar.com/docs/salient/page-builder-columns/#width .
Also regarding the lines in the Images, try changing the Image Gallery Style and see if that makes a difference
Thanks.
ThemeNectar Support Team
Thanks for the response Tahir,
Thanks for referring me to this section which you've referred others to..however, I like them are really still struggling as either I'm just doing something wrong or it's just not really as intuitive I would think it could be. Pls see the following attachments...
On this page, If I create a 4 column row and assign the 4 column mobile response settings, while it retains the 4 columns the section is not centered the way I want it to be. If create a two column row and assign the two column to the mobile settings it also retains the two columns (I've left both sections active for you to see) but also is off center. I'm not sure I understand why it won't remain centered and certainly understand that is why you would have the offset settings...but everytime I select what I would think would be an offset value that would work (including the percentages) everything goes weird (see attachment). If I want this to stay as a 4 or 2 column on mobile, should I select a 4 or 2 column offset?
I'm sorry if I'm missing something obvious and to be so persistent about this, but it just seems this should be an easy format to build and maintain responsively. As you can see below the custom code you provided to have the image gallery show in 2 columns worked perfectly, but its just seems no matter what I do I cannot get these column responsive settings to work for this section. Any specific help would be so appreciated.
As for the gallery style...the other styles do not work for what I'm trying to accomplish so if you know of anyway to prevent the little gaps from occurring I'd sure appreciate it.
Attached files: SalientThemeSupport-4to2ColumnResponsiveAdjustment.jpg
SalientThemeSupport-2to2ColumnResponsiveAdjustment.jpg
SalientThemeSupport-2to2ColumnResponsiveAdjustment-AfterOffset.jpg
Hey Again,
I believe the issue is with the use of the Offset setting. It should not be used in your case.
You only need to set the width on mobile to "6 columns" on each column setting.
See screenshot:
Thanks.
ThemeNectar Support Team
Thank you much Tahir....
Awe...think I had things backwards on the two column build...as for the 4 column build, it's a little weird that the responsive settings by default are 3 columns - 1/4 and need to be set to that to get the 2 columns on mobile (perhaps the confusion comes from my linear thinking that 3 columns would be 1/3 and 4 columns would be 1/4) but moving forward I'll make sure they are set to the same so there aren't any weird offsets!
Appreciate the assistance of the support team to help us get this over the line!