Row Columns Respect Gutter When Horizontal - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Row Columns Respect Gutter When Horizontal

S

SPD

SP Page Builder 2 years ago

SPPB 3 latest Is there a trick to get row columns to respect the gutter I set between them when the browser window size is reduced and they switch to vertical?

Horizontal, note space between columns https://drive.google.com/file/d/1JPTjI4D5I5GOORMw0oovAlDkF-jUs4eT/view?usp=sharing

Window size reduced, now vertical, no space between the columns and with rounded borders it looks off imho. https://drive.google.com/file/d/1rjv5GWFtB1ybIMAJOreNejgfauuB-HJ2/view?usp=sharing

Cheers

0
5 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 years ago #113549

Hi there!

Thanks for contacting us.

You can control this by select the tab view from your SPPB edit panel and put margin value for your respective column options. The following screenshots may help:

https://prnt.sc/HDMZn7SfSpZS

https://prnt.sc/krUBBg2iU3pf

Best Regards

0
S
SPD
Accepted Answer
2 years ago #113686

Ok, I was taking about changing the browser window size on a desktop but are you suggesting that I could use the different device settings to also affect how different window sizes display in the desktop.

Will experiment, tbh showing my ignorance here, I always though those setting actually kicked in based on device, not window size.

As a followup then, can you tell me if its possible to have those settings in my custom.css file? iow, how do I identify the settings a a mobile one. Since I reuse alot of rows/column setting I found that have it in custom.css file make it easier to tweak global. I do use My Sections, but mostly for rows/column/add-on with no values set and then I set them up in custom.css. Might not be the rightway to do it but I find it does save me alot of time going back and forth over pages articles to change stuff Cheers

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 years ago #113705

Hi,

You can try media query in this case from your suitable device resolution and keep the media query in your custom.css file. Do you want to apply this to your all columns?

If yes, then the following can be an example:

@media (max-width: 1199px){
.sppb-addon-wrapper {
    margin-bottom: 60px !important;
}
}

You may modify it as per your need.

Best Regards

0
S
SPD
Accepted Answer
2 years ago #113708

Cheers for response. No, it would be on a column by column basis I am thinking. While I am finding I dislike having setting buried in the individual add-ons in every column/row/page I think my only choice will be to setup 'My Sections' for my needs.

What I could really use is templates within the template, lol. Anyway, your original suggestion is working fine so I will keep using that for now

Thank again

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 years ago #113718

Glad that the first one is working for you and you are always welcome :)

Have a nice day!

0