Hey guys, I have a recurring issue with white space between rows on Vantage.
Private SnippetCurrent example is here. I placed a screenshot between the menu and footer of the current site I’m building.
http://imsone.com/gradrun/temp/
I’ve built several sites in Vantage and have found some work arounds, but it’s been an ongoing challenge in Page Builder with the default white space between rows being unnecessarily wide. Over-utilizing negative numbers in code creates issues with overall page layout so I’d like to avoid it.
Some CSS I’ve used recently includes:
/* Headline Widget main – size, align*/
.widget_headline-widget h1 {
font-size: 40px;
color: #0c517a !important;
text-align: left !important;
font-weight: 800;
line-height: 55px;
padding-bottom: 0px;
}
@media (max-width: 980px) {
.widget_headline-widget h1 {
font-size: 25px;
}
}
/* Remove white space under menu and visual editor image (negative numbers allowed) */
.entry-main {
margin-top: -10px;
}
/* Set Page Builder rows bottom margin */
.panel-grid-cell {
margin-bottom: -20px !important;
/* Adjust the number on this row as desired */
}
Is their anyway within the framework of this theme to avoid the huge spacing that occurs with Vantage Headlines, H1, H2, H3 and paragraph text, rows and widget use in general. Altering theme settings and page builder settings don’t seem to minimize white space effectively either.
Thanks!
—
Hi, I received this after sending a message to [email protected].
Looks like spam?
I was hoping to get a response on my error in posting my Premium # on a support forum.
Thanks!
Hi mjordan,
Sorry about that – I must have done that as I was heading off last night.
If Vantage is a common tool in your arsenal I would recommend creating a boilerplate style child theme. It’ll help save time during the initial development where you typically do the same thing every time anyway – this being a perfect example. This way you can override the base spacing to your liking and have it be consistent from here on out.
I would also recommend targeting the main elements rather than specific classes. This way you won’t have to target .some-class h3 and .some-other-class h3 for much the same thing.
Here’s a basic child theme for Vantage already set up. If you have any other questions about Vantage or child themes in general, please feel free to ask – I’ll be more than happy to help. :)
Great Alex, thanks for the suggestions.
I used a child theme once, but have since ended up relying on the CSS entry in WordPress.
I'm not familiar with targeting main elements, but digging through page code I've tried to figure out padding and margin for specific areas,
which limited success.
This may be out there somewhere but is there a list of Vantage main elements similar to the Vantage Content Headings: (.entrycontent h1-h6)
for example, which I found in your forums.
My coding is still pretty limited, but I've managed to get great results with the Vantage theme, so I'd like to expand on what you've provided.
Hi Mjordan,
Regarding main elements. By that, I mean standard elements, such as h1, h2, h3, aside, div, p, etc. If you want to target every h1 on your website? Just target it. It doesn’t need to be attached to .entrycontent.
If you have any questions about using the SiteOrigin CSS Editor, even if it’s purely CSS; I’ll help. :) (hey, how else am I going to offer support for that plugin)
Here’re a couple of articles I highly recommend you give a read; How CSS Selectors Work I recommend that entire website actually – just be aware that it’s not 100% focused on your skill level so some things might appear to be a little… alien?
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started. The MDN has some of the best documentation I’ve ever seen. Wanna learn HTML? Go there. Wanna learn JavaScript? Go there. It’s seriously an amazing resource that nobody should ignore.
Thanks Alex. I can certainly use those resources!
My biggest challenge has been, for example, when I use a Meta Slider or
Site Origin slider top of page, then I place a visual editor with an image, or h1 h2 h3 text or a Vantage headline widget. The results in spacing between those elements are always different and by default, are too much whether in the same row or in the row below. It seems to relate to the Row Layout selection within Row styles too.
If I can set my child theme to alter how those elements create space, to narrow the gaps, away from the default in Page Builder results, that's what I'd like to do.
Hopefully, by getting in to coding more I can determine what is happening to create the space variations between each row, widget or individual elements whether it's padding top or bottom or a <div> is created pushing things apart or a line break.
I have a bit to learn you could say :)
Thanks again for your help!
Hi Mjordan,
It’s been an absolute pleasure. Is there anything else I can help you with today?
You are on it! thanks Alex.
Had a client send this to me…thght I'd share it