Sorry for late reply…I took most of today off 🙂
Anyway, the widgets have a 3rem bottom margin to them, so it looks like a little adjustment is needed. However, you can grab the class of the widget and create a custom CSS to remove that bottom widget margin from that widget group. From what I can see, the class would be:
#cir-top .widget {
margin-bottom: 0;
}
Or you can do it globally and modify the widget class (on all widgets) and change the margin:
.widget {
margin-bottom: 1rem;
}
Hey there,
You were very quick at getting back. You guys are great.
Do I put the class at the bottom of every widget after the HTML code? Or where would I be able to change the global class on all widgets?
Thanks.
You’re very welcome 🙂
If you are using Jetpack, it has an Edit CSS feature, otherwise the other option is using a child theme for any modifications…however, for just CSS only modifications, such as I mentioned, you can use a plugin like Simple Custom CSS. It creates a custom CSS file with your overrides in it. Each of these options allows you to keep getting theme updates without losing your changes. If you are just doing CSS changes, opt in for the Simple Custom CSS plugin method.
Hi there,
I am going to be putting in some css for a calendar booking system later, well copying and pasting.
I installed jetpack as I guess I will need it for that anyway. I pasted in the change in appearance/edit css. Pardon my ignorance. This does not work anyhow.
/*
Welcome to Custom CSS!
CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.
By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don’t need to copy all
your theme’s stylesheet content.
*/
.widget {
margin-bottom: 1rem;
}
It’s actually working, but the problem is now your other widget in the Top 2 position…you have a ton of empty spaces, but also several empty <p> sets in it that is creating a lot of space in your page.
oh duh this looks fine now.
thanks so much for your help.
Will give you a great review.
You’re very welcome and thank you for the review 🙂
