I’m struggling to reduce the space between widget that is too big for my liking
I’m adding screenshots of the site.
for confidenntial reasns, I black-boxed some of the text content.
https://www.dropbox.com/s/omgkg4ljjzydz9l/scsht1.png?dl=0
https://www.dropbox.com/s/xdifggac77mjzgr/scshot2.png?dl=0
https://www.dropbox.com/s/1czmn8grqeo7ppz/scshot3.png?dl=0
What I am looking for is either means to shrink the distance below 0 padding (i tried to insert negative values but there was no success)
or a CSS that I can put in the Widget Style->Attributes->Widget class & CSS style to control the distance of those particular widgets (not in the whole page or site).
thank you very much
Hi Nir,
This spacing is being added by the widget you’re using.
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.widget_sydney_action .roll-promobox { padding: 0; } .widget_sydney_action .promo-controls { margin-top: 0; }You might also need to install the SiteOrigin CSS Editor.
it works quite well, but this will affect all the CTAs in the website right?
I need something with Scope of that page alone since it affects the margins of titles and CTA margins all over the website.
Hi Nir Harpaz
It will. Please use the following CSS Instead:
.page-id-128 .widget_sydney_action .roll-promobox { padding: 0; } .page-id-128 .widget_sydney_action .promo-controls { margin-top: 0; }You might also need to install the SiteOrigin CSS Editor.
It works but with 2 last issues if I may
1. each of the params, margin-top and padding, seem to act in a binary way.
either 0 or >0.
this way I have something like 3 or 4 margin options, rather than the ability to play with it.
why?
2. when I moved the new CSS to the page CSS field (super simple CSS plugin) this wasn’t the issue and I have been able to edit it freely. however, your precious CSS
.widget_sydney_action .roll-promobox { padding: 0; } .widget_sydney_action .promo-controls { margin-top: 0; }had no effect.
whay are those differences?
3.page-id-128
What is it? Is there a table where each id refers to?
If I want to change the effect to happen only on another particular page, how can I do it?
Hi Nir,
1. I’m not too sure I understand. If you’re looking to increase the margin (or padding), simply increase the value and add a unit of measurement (such as px). An example of this is:
.widget_sydney_action .promo-controls { margin-top: 22px; }To clarify, you do not need to add a unit of measurement if you’re setting it to 0.
2. There could be many different reasons for this. The most typical reason being that something else is setting the margin after that CSS (if a is defined in two places, the last definition is used).
3. The number is the id of the page. You can find the id of the page by opening the page and making note of the id in the address bar.
The id is unique to your website so, no, there’s no table.
seems like the issue is solved then
thank you very very much Alex