Increase vertical spacing for widgets on mobile view

[GR8FL]

How can I increase vertical spacing between widgets on mobile view?

They’re displayed on the home page: Hattie’s Garden, but they’re also on others, so I’d like it to be generic if possible.

[scrambler]

First you need to modify all your existing custom CSS for the multi column, because it includes a global margin property that fixes All margins, instead of only the left and right which is all you actually need for the column CSS.

For example, instead of

.page-id-8 .widget.content-3-col {width:31%;margin:1% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;float:left;}

You should have

.page-id-8 .widget.content-3-col {width:31%;margin-left:1% !important; margin-right:1% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;float:left;}

Once that is done, the theme Widget top and bottom margin setting will take effect, so you can change it there globally

And if you need to change the widget Top Bottom margin only on mobile, you can use a simple rule like

.is-mobile .widget {margin-bottom:20px;}

 

[GR8FL]

These settings were placed in the Weaver Xtreme Plus section on the page, not in the global CSS.

.widget.content-3-col {width:31%;margin:1% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;float:left;}

Should I change it there to say the below instead?

.widget.content-3-col {width:31%;margin-left:1% !important; margin-right:1% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;float:left;}

The only difference is specifying left and right margin for these widgets instead of all margins, correct?

[scrambler]

yes the CSS needs to be modified regardless of where it is located, so it does not affect top and bottom margin

[GR8FL]

How can I increase the spacing on the desktop if I have 2 rows of columns? Using margin-bottom:2% !important;

.widget.content-3-col {width:31%;margin-left:1% !important; margin-right:1% !important;margin-bottom:2% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;float:left;}

would defeat the purpose of adding .is-mobile .widget {margin-bottom:20px;} to the CSS.

I have another site that has 2 rows of three column widgets.

[scrambler]

I do not understand what you are trying to do.

I told you to NOT put any top bottom margin in the CSS, and let the regular widget margin setting do their job (Main options > Sidebar and layout > Individual widget top and bottom margin).

Then and If that default widget setting needs to be different on mobile you can use the rule I gave you.

In other words, use your rule Without any top/bottom margin

.widget.content-3-col {width:31%;margin-left:1% !important; margin-right:1% !important; background:#DBE6E0; border: 2px solid#816687;border-radius:10px; padding-top:1%; padding-left:1%;padding-right:1%;position:relative; padding-bottom:60px;float:left;}

Then in Main Options > Sidebars & Layout > Individual Widget > Top/Bottom margin, set the value you like for top and or bottom margin

Then if that value is good on desktop but you want a different one on mobile, use

.is-mobile .widget {margin-bottom:20px;}

[GR8FL]

I am sorry @Scrambler. I see now where I can globally adjust the top and bottom margins in the Sidebars & Layouts menu.

Thank you for your help.

[GR8FL]

One last question…

On mobile how can I add more spacing at the top between the widget border and the text?

[scrambler]

Your CSS rules have a padding-top property of 1%, change that to a fixed pixel value like 15px

[Author]

Posts