For my planned layout, these VC Element is a great base and I started with 6 elements, each element with a Box Size of „4 col - medium“ and all is working fine. (Screenshot 1)
Then I tried to remove the spacing between the portfolio items with „Masonry Portfolio Settings -> Item Spacing -> No“ and it worked. (Screenshot 2)
The next Step was to define the VC as follows „Row Settings -> Row stretch -> Stretch row and content (no paddings)“ and it worked, BUT:
The spacing between the elements seems to be a bug! (Screenshot 3)). This happened on loading the page. After resizing the browser view it looks right. (Screenshot 4)
I tried some VC settings and quite accidentally I added a second row in VC „Blog Posts* with Kalium Standard settings and now the the unwanted gap is removed on page loading (perhaps this could help you finding the bug). When I try to use only a „Text Block“ as second row it won’t work - only with the „Blog element“ the gap is removed on loading. (Screenshot 5 (Textblock) - Screenshot 6 (Posts))
How could I remove this bug?
Another behavior is that when I set a background for the row, the row is bigger that the content - This is not good, because by setting the row or content background I and I think others would only set a color with the real content height. (Screenshot 6 - Background Row - Screenshot 6 - Background Content)
Another question is: I want that behavior on resize like the normal VC columns: If the screen size is too small I only want to have „ONE ELEMENT PER ROW“. The Portfolio Element show always two rows. How it could work that on smaller than x only one element will be shown.
This should also work when I use: one element „8 col - medium“ and one element „4 col - medium“ per row.
By testing the responsive functionality there is an other „problem“: the boxes are „square / quadratic boxes“ (which I need ) normally but on smaller sizes (iPhone) they are rectangular boxes (it seems like 4:5 sizing) - how could this be changed.
It would be great to get some tips about this from you.
The problem with stretched container seems to be a bug of the theme so I will try to fix it. Can you please provide me the page URL and credentials so I can troubleshoot this bug and provide the proper solution for you.
As for row background, that is applied to the first element (container) and whether the content is centered or fully stretched the row background will be applied to parent element only. You can try something different by adding row background to inner row (or column) so that way only specific element inside the row is affected, you can apply column background as well but with Custom CSS can be simpler.
Row responsivity: I am not sure if that is implemented on Visual Composer or our theme, so custom CSS should applied on this cases.
For box resizing ratio I need to check the page to see if this problem can be solved.
The stretched problem seems to be a bug, yes. But the problem with the background seems to be a bug too! I have made the screenshots from a clean installation after the import of the Main Demo.
For the screenshots I made:
- one background for the row OR
- one background for the content
and in both cases the result is like you can see in the screenshots - its not "good" - perhaps it comes from not having a header for the item???
At the moment I have no credentials for the main test page - I tested only for you with a clean install, so you can reproduce it without problems
I have some problems / bugs by using the „Masonry Portfolio“ Visual Composer Element:
I tried to use your demo page as base for testing: https://demo.kaliumtheme.com/main/masonry-portfolio/variant-3/
For my planned layout, these VC Element is a great base and I started with 6 elements, each element with a Box Size of „4 col - medium“ and all is working fine. (Screenshot 1)
Then I tried to remove the spacing between the portfolio items with „Masonry Portfolio Settings -> Item Spacing -> No“ and it worked. (Screenshot 2)
The next Step was to define the VC as follows „Row Settings -> Row stretch -> Stretch row and content (no paddings)“ and it worked, BUT:
The spacing between the elements seems to be a bug! (Screenshot 3)). This happened on loading the page. After resizing the browser view it looks right. (Screenshot 4)
I tried some VC settings and quite accidentally I added a second row in VC „Blog Posts* with Kalium Standard settings and now the the unwanted gap is removed on page loading (perhaps this could help you finding the bug). When I try to use only a „Text Block“ as second row it won’t work - only with the „Blog element“ the gap is removed on loading. (Screenshot 5 (Textblock) - Screenshot 6 (Posts))
How could I remove this bug?
Another behavior is that when I set a background for the row, the row is bigger that the content - This is not good, because by setting the row or content background I and I think others would only set a color with the real content height. (Screenshot 6 - Background Row - Screenshot 6 - Background Content)
Another question is: I want that behavior on resize like the normal VC columns: If the screen size is too small I only want to have „ONE ELEMENT PER ROW“. The Portfolio Element show always two rows. How it could work that on smaller than x only one element will be shown.
This should also work when I use: one element „8 col - medium“ and one element „4 col - medium“ per row.
By testing the responsive functionality there is an other „problem“: the boxes are „square / quadratic boxes“ (which I need ) normally but on smaller sizes (iPhone) they are rectangular boxes (it seems like 4:5 sizing) - how could this be changed.
It would be great to get some tips about this from you.
Hi hahni,
The problem with stretched container seems to be a bug of the theme so I will try to fix it. Can you please provide me the page URL and credentials so I can troubleshoot this bug and provide the proper solution for you.
As for row background, that is applied to the first element (container) and whether the content is centered or fully stretched the row background will be applied to parent element only. You can try something different by adding row background to inner row (or column) so that way only specific element inside the row is affected, you can apply column background as well but with Custom CSS can be simpler.
Row responsivity: I am not sure if that is implemented on Visual Composer or our theme, so custom CSS should applied on this cases.
For box resizing ratio I need to check the page to see if this problem can be solved.
Thanks for your precise description of the issue.
Hi Arlind,
The stretched problem seems to be a bug, yes. But the problem with the background seems to be a bug too! I have made the screenshots from a clean installation after the import of the Main Demo.
For the screenshots I made:
- one background for the row OR
- one background for the content
and in both cases the result is like you can see in the screenshots - its not "good" - perhaps it comes from not having a header for the item???
At the moment I have no credentials for the main test page - I tested only for you with a clean install, so you can reproduce it without problems
Regards André
Hi André,
The screenshots are not available here, maybe you forgot to include the link. Do you have any link of our demo that has this issue so I can see it?
You can also tell me how to reproduce the issue step by step so I can try it on my localhost.