Header Widget CSS

[ROBIN]

I am trying to add margin and or padding to the first and third header widgets on this site.

https://loveandlightadoptions.com/welcome/

I have used the F12 inspect option but I can’t find the exact name of each widget.  I imagine I would do

something similar to this:

.Widget name here { margin: 50px 4px 8px 4px !important; }  if I am off base please let me know.

I would appreciate any help you can give me.

Thank you in advance.

 

 

[Weaver]

Try

#header-widget-area .widget-1

#header-widget-area .widget-2

If you add more, they increase the number.

 

Sometimes it is easier to simply look at the HTML output of the page.

[scrambler]

If you look under header, you see the header-inside container, then the header-widget-area container, and in there arge the three widgets with an aside tag

#custom_html-2

#widget_sp_image-2

#widget_sp_image-3

So if you want to add these margin to the first and last, the rule would look like

#custom_html-2, #widget_sp_image-3 {margin: 50px 4px 8px 4px !important;}

BUT that would, screw up the layout, as the margin are not part of the width, so the widget would drop on two lines

So you should use padding instead and you should not need important

#custom_html-2, #widget_sp_image-3 {padding: 50px 4px 8px 4px;} 

[ROBIN]

That worked like magic.  Thank you!

[scrambler]

Not magic, CSS

🙂

 

[Author]

Posts