Hi,
I’ve embedded a live stream and a chat window into my homepage, but they’re not displaying correctly.
I’ve inputted CSS I saw from another thread to try and make it the full page width, but it doesn’t seem to work:
/* Vantage Full Width Layout Adjust Container Width */
body.responsive.layout-full #page-wrapper .full-container {
max-width: 1080px !important;
}
Also, I’ve changed my site title to “game change” with a different font, and those effects are also not taking place.
My website is here: gamechangecharity.com
I figured out how to fix the site title – had to remove the logo from the “Appearance -> Theme Settings”.
Hi Nathan
Thanks for running Vantage.
The CSS selector you’ve pasted won’t change anything unless the default 1080px width is changed. The selector was provided to a client that wanted to change change the content width when using the full width layout in Vantage.
I don’t seem to be able to view your site. Perhaps you can confirm the link and I’ll take a look at the display problem.
Hi Andrew,
Thanks for the quick response. I was just able to view the site from my work computer on both IE and Chrome. The link is correct above. The host I’ve moved to is dealing with a couple of unexpected errors, sometimes a refresh is needed.
I am using the full width layout, as I don’t need the sidebar for this particular iteration. I went ahead and decreased the stream size and chat in order to fit within the margins, but I’m hoping I’ll be able to make use of the margin displayed.
Regards,
Ok, with you now.
To change the main content container padding, insert the below into Appearance > Custom CSS:
#main { padding: 35px 35px 35px 35px !important; }And edit as required. The numbers represent top, right, bottom, left.
Ahhhh, I got it! Thank you for your explanation. I changed the 1080px to something larger (1440px), and that worked perfectly for me. I appreciate the clarification!
Have a great day – I’m sure I’ll be asking more questions as I continue to build :)
Thanks,
Super, glad that helped. All the best with your project.
Sorry, one more question:
How do I remove the space between rows in page builder? As you can see, I have white space between my headline and four icons. I’m using
.panel-grid-cell { margin-bottom: 0px !important; }And it doesn’t appear to be working for me. Any ideas?
Give this a try:
.panel-grid-cell .panel { margin-bottom: 0px !important; }Made the revision, didn’t see a change.
If you can perhaps make the site public for a bit I can take a look, just leave the Custom CSS in place. Thanks.
The page is now viewable.
Try this for me, it’s specific to this page:
#pg-2-0, #pg-2-1, #pg-2-2, #pg-2-3, #pg-2-4, #pg-2-5, #pg-2-6, #pg-2-7, #pg-2-8, .panel-grid-cell .panel { margin-bottom: 0 !important; }And remove the last selector we were trying.
Thanks
This seems to have worked, thanks!! Do you happen to have an explanation so I can use this as I continue to expand this page?
Each Page Builder row has a unique ID so we’re setting the margin for each row ID there.
Here is our overview tutorial on this:
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
Super! Thank you again for your help. Great service.
No problem. Glad we could help out.