Best Answer

Remove the bottom margin of a specific widget ID

  • 29 March 2022
  • 3 replies
  • 68 views
Neil Patterson
Rank
Userlevel 6
Badge +2

Hi all,

I’m still getting to grips with CSS and have become stuck in a job I need to get done.  Basically we have an image widget above a channel widget, but it has a margin underneath that I would like to remove so the image is closer to the channel.

I have found the widget ID, but am stumped as to what I need to put to change the margin size.

Can anyone help please?

Thanks in advance

Neil

icon

Best answer by Bfarkas 29 March 2022, 14:49

View original
Neil

3 replies

Bfarkas
Rank
Userlevel 7
Badge +2

This should work for an image one:

#doc-widget-1226.single-widget {
margin-bottom: 0px;
}

You can adjust the margin to what you want, and keep in mind when being widget ID specific if you do things like change the column setup the ID’s change.

Technically you don’t need the .single-widget either, as the ID is specific enough, not sure which is the better approach though as I like this level of specific in case the widget changes this will break and revert to the default settings until it can be assessed.

Neil Patterson
Rank
Userlevel 6
Badge +2

This should work for an image one:

#doc-widget-1226.single-widget {
margin-bottom: 0px;
}

You can adjust the margin to what you want, and keep in mind when being widget ID specific if you do things like change the column setup the ID’s change.

Technically you don’t need the .single-widget either, as the ID is specific enough, not sure which is the better approach though as I like this level of specific in case the widget changes this will break and revert to the default settings until it can be assessed.

Well that is REALLY frustrating!

I had that, but had a space between 1226 and .single-widget, which doesn’t work - d’oh!

Thanks @Bfarkas 

Neil
Bfarkas
Rank
Userlevel 7
Badge +2

This should work for an image one:

#doc-widget-1226.single-widget {
margin-bottom: 0px;
}

You can adjust the margin to what you want, and keep in mind when being widget ID specific if you do things like change the column setup the ID’s change.

Technically you don’t need the .single-widget either, as the ID is specific enough, not sure which is the better approach though as I like this level of specific in case the widget changes this will break and revert to the default settings until it can be assessed.

Well that is REALLY frustrating!

I had that, but had a space between 1226 and .single-widget, which doesn’t work - d’oh!

Thanks @Bfarkas 

Ah, so just to close the loop, that would have worked for a div or element with the class of .single-widget that is a sub-element of the element with the widget id, since the class was on the same element, wouldn’t apply properly, also is why you technically don’t need the class at all, since the id is unique to begin with, but like I said above might have side benefits to be double specific in this case. Happy you got it sorted.

Reply


Terms & ConditionsCookie settings