hai,
I was testing the beta2 version of page builder 2.5 and noticed an issue. i had an issue before while adding widgets inside layout builder. please see this thread
in this Andrew suggested a CSS to overcome the problem
#page .panel-grid-cell .my-cell-class .so-panel {
margin-bottom: 0;
}
but now when using beta 2 I find that the gap between two widgets appears again . what is the solution for it? I have used the CSS for building my site and when I update it with the upcoming version that might cause a layout issue.
waiting for a reply.
Hi Gopu,
Please open the row that houses the widgets and head over to the row styles sidebar. Open the Layout settings group and set the bottom margin to 0. How does that look? Alternatively, if you’re referring to horizontal spacing, alter the gutter.
Hai Alex,
i was not referring to the horizontal spacing.
.
when widgets are placed inside a ‘layout builder widget’ changing the bottom margin does not show any result. please try this
1) create a row.
2)add layout builder widget to the row
3)open layout builder widget
4)insert two image widget inside this layout builder
5)now try to change the value of bottom margin inside the layout builder to 0.
i see that no effect is getting applied there still is a gap in between the widgets. so Andrew some time back gave me a css to correct the issue
#page .panel-grid-cell .my-cell-class .so-panel {
margin-bottom: 0;
}
it worked fine but with the new beta version this css is not working. going to setting>pagebuilder>layout>row Bottom Margin to 0 works but that would get affected to all the widets i use and i dont want that. could you please check it out.
update. I tested with beta3 version that released yesterday and tht also has the same problem… Beta Version1 had no issues
Hi Gopu,
Ah. Yeah, that’s something I’m in the process of trying to get fixed – it’s complicated.
Regarding the CSS. Where did you set my-cell-class? I ask as you didn’t set it in your step by step instructions. If you haven’t set the custom cell class it makes senses why it wouldn’t work.
oh sorry. i set that in SO custom css plugin .Andrew gave me the CSS before. please refer the thread Thread: increase width of content field
Custom CSS:
#page .panel-grid-cell .my-cell-class .so-panel {
margin-bottom: 0;
}
this is the layout of my work. https://www.dropbox.com/s/1e9tn1l32q1cdj6/layout-04042017.json?dl=0
Hi Gopu,
Thank you for providing me with the layout.
To clarify, where are you setting #page? I don’t see it being set anywhere in the provided layout.
Thanks Alex for the reply :)
#page? i set ‘ my-cell-class ‘ in row styles.
Andrew gave me this css trick before
in this thread Thread: increase width of content field
Hi Gopu,
Okay, so to clarify, what happens if you use the following CSS instead:
.panel-grid-cell .my-cell-class .so-panel { margin-bottom: 0; }If not, try:
.my-cell-class .so-panel { margin-bottom: 0 !important; }To clarify, I don’t know where you’re setting #page or why Andrew suggested it so I would recommend trying it without it to see if that work.
Thanks Alex for the reply.
I don’t know much about CSS, so I can’t give an answer to the #page question you asked :). I followed the instructions Andrew gave me and it worked fine till now.
the new modified CSS you gave me don’t show any change in the result. still, there is a gap in between. Alex, are you able to rectify the issue with the same CSS you gave me?
and the Beta1 release did not show this issue. but the next two releases beta2 and the recent beta3 release has this issue. so, I think some changes made to the 2and3rd beta versions is causing this issue to occur.
Hi Gopu,
To be honest, the second CSS should have removed the spacing (it was my, “at least the second option will work” CSS – there’s no reason for it not to work).
.so-panel { margin-bottom: 0 !important; }Does that do anything to remove the spacing for you? If it doesn’t… this spacing isn’t added by the same thing as in the linked thread. Do you have a public URL where we can take a look at what’s going on so I can double check your setup?
Alex i have a live site but that is not working with the new beta version. it works on Version 2.4.25 . is that enough.
https://www.loongtrips.com/things-to-do-in-austria/
is one of the pages that i have used layout builder widget to create the content. i cant find an option now to sent private replies now :()
update,
the new css worked. i will get back to the thread if something comes up thanks Alex.
Hi Gopu,
Wait, so this CSS worked?
.so-panel { margin-bottom: 0 !important; }Did you try the second to last CSS provided?
.my-cell-class .so-panel { margin-bottom: 0 !important; }.so-panel {
margin-bottom: 0 !important;
}
this CSS worked.
Alex, for this CSS
.my-cell-class .so-panel {
margin-bottom: 0 !important;
}
Where should I paste ‘ my-cell-class ‘ ? if i paste them in ‘cell class’ it does not show any result. like in the thread i referred before.
Alex the only problem is that this css
.so-panel {
margin-bottom: 0 !important;
}
gets applied to all the layout builder widget i use. i cant specify to which all layout builder widgets i want this to apply. the earlier css which Alex was useful, but now .. could you tell me a way to specify them to one layout only?
Hi Gopu,
You should add my-cell-class to the row class. Please open the row by clicking the wrench icon and head over to the row styles sidebar. Open the Layout settings group and set the row class or cell class to my-cell-class
Alex, adding ‘ my-cell-class’ in Row class only works. Setting them in Cell Class does not show any result. earlier i was setting them in cell class that is why i did not get a result.