Using Pagebuilder inside the Vantage Theme on my homepage, I added a row with 3 even columns. Inside each column I added a Vantage Headline widget. I edited each widget to add a headline AND a sub-headline. The front end showed both the headline and sub-headline properly (with a short separation line between them).
I left the styles within each of the column widgets (attributes, layout and design) unchanged.
I also checked “responsive” in Appearance>Theme Settings>Layout.
Problem: When I reduce the homepage to mobile size on my laptop, or view the page on my iPhone 5c, the three columns pile up on top of one another to form a single vertical column. I would like them to stay together as a single row of three columns, and just reduce in size.
For example, and to be even clearer, I am using the Visual Editor widget (Black Studio Tiny MCE Widget) in separate rows that contain picture galleries of varying columns (anywhere from 1 to 5). The galleries were created within the Media Library function. When I reduce the gallery page, the gallery columns stay together and simply reduce in size.
That is what I am looking to do with the headlines. Please advise if I should be using a different SiteOrigin or other widget or plugin if Pagebuilder’s Vantage Headline Widget will not work with headlines or text in the way I am after.
Thx!
An example closer to home = site origin.com home page! See items below the main image.
More than 4 days and still awaiting reply. To simplify: what is the custom CSS to cause a row of 3 Vantage Headline widgets to stay in a fixed table/column grid when resizing? The SiteOrigin home page rows with 3 columns (including the ones with the circle icon widgets) compress but stay side-by-side. How?
Hi Andrew –
It’s been 18 days since I first posted this. Any suggestions? Please take a look at the homepage of christinaames.com. Then resize it, and you will see that the three Vantage headlines below the slider pile up on top of one another, rather than stay in a fixed 3-column format like those on the siteorigin.com homepage.
FYI, I am ok with shrinking down the size of the headlines, which is necessary if they are going to resize in a fixed format.
Thanks!
This is a private message.
Hi Cames
First of all I apologize for the delayed response.
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
It will help me get you tested solutions
Looking forward to hear from you.
Addo –
Please read the very last msg before your response. It contains the URL, which is christinaames.com. Again, look at the homepage where three Vantage headlines w/subheadlines are placed below the slider (i.e., actor, singer, writer, etc.). When resized, the Vantage headlines pile up on top of one another instead of staying in a fixed 1-row, 3-column format like those on your homepage.
FYI, when your page is resized the footer elephant econ overlaps the menu.
Thanks
*icon
Hi Cames
Sorry I missed that link.
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (max-width:780px){ pgc-458-0-0 , #pgc-458-0-1 , #pgc-458-0-2 { width:23.333% } #pg-458-0 , #pg-458-1 , #pl-458 .panel-grid-cell .panel { margin-bottom:20px } #pg-458-0 .panel-grid-cell , #pg-458-2 .panel-grid-cell { float:left } #pgc-458-2-0 { width:61.95% } #pgc-458-2-1 { width:18.05% } #pl-458 .panel-grid-cell .panel:last-child { margin-bottom:0 } #pg-458-0 , #pg-458-2 { margin-left:-10px;margin-right:-10px } #pg-458-0 .panel-grid-cell , #pg-458-2 .panel-grid-cell { padding-left:10px;padding-right:10px } }You can modify the size in px @media (max-width:780px) to desired size but that is the recommended one.
Try that out and let me know the outcome.
Cheers
Addo –
Thanks. I was already using “Simple Custom CSS” and I copied and pasted your code and updated the Custom CSS successfully. There was no change. The Vantage headlines/subheadlines still pile up vertically when resizing to mobile size (and even before getting that small). I tripled-checked to see that it copied fully and correctly.
I noticed your code refers to pg-458. I changed the the permalink settings for the home page so there is no numerical identifier after the url, and so the identifiers for the other 4 pages use the page name after a forward slash. Perhaps that has nothing to do with why your code isn’t working.
Take a look yourself now that I updated the Custom CSS with your code – christinaames.com.
Thanks
Hi Cames
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
For copyright reasons I need to monitor your access. So it is possible if I know when you are ready to access the account and when you will leave.
Is that ok with you?
If so, please specify a day and time – I am in the US on Eastern
Standard Time until this Sunday at 2am when we move clocks 1 hour ahead to Eastern Daylight Time. To simplify, I am on New York time.
Thanks for your help.
I assume you saw that the columns were not fixed. Could it have anything to do with using the Vantage Headline widget instead of another text or Visual Text widget?
Hi Cames,
We are always online therefore we are ready when you are :-) . When you have it ready just let us know we jump to it
Looking forward to hearing from you.
Cheers
This is a private message.
Addo – It's set if you could go on now and I will leave email open so you can let me know what you see and what to do. Thx
did you get the notice and password?
reply to me when ready. I did not hear from you since setting up the admin account so i temporarily suspended it until you reply.
Hi cames
Thanks for the long wait here. Recent updates to Page Builder and Vantage caused an unprecedented surge in support queries. We’re almost caught up. Unfortunately during these periods our forum prioritisation kicks in quite hard and we focus on our premium theme threads before making it down the list to our free customers.
The stacking behaviour of your Headline widgets and all columns in general is normal mobile responsive behaviour. We can help you reverse this for a row but I think you’ll find things get a little crowded down at the lower resolutions, hence the stacking that usually takes place.
Give the following a try in your Custom CSS plugin and let us know how you do from there:
/* Home Page */ @media (max-width: 780px) { #pg-458-0 .panel-grid-cell, #pg-458-1 .panel-grid-cell, #pg-458-2 .panel-grid-cell { float: left !important; width: 33.33% !important; } }Thanks, AndrewThat works, but it affects not only the Vantage headline/subheadline portion, but the text and images below. Is there a way to have it affect only the headline portion and nothing else?
Thanks again.
Andrew – I should have added that I would like the headline/subheadline to resize proportionally (i.e., shrink) just as the gallery photo strips shrink proportionally but stay together on resizing the screen. Sorry for the double emails. Thanks
Hi Cames
I’ve just read through this thread, and from what I understand, the 2 things you’re looking for are an option to disable responsiveness on a given page/row in Page Builder, and a proportionally scaling headline widget.
Right now, it would be best if we implemented both of these as features in Page Builder and Widgets Bundle respectively. I’ve marked this thread as a feature request. We often look through these threads to get ideas for what to add in our future updates. Hopefully, we’ll be able to add this in a future update.
If you need this urgently, you could always post a job on https://codeable.io/. Someone there would be able to help you with a custom solution while we work on adding these features to our products.
Hi Greg –
Andrew Misplon just posted Custom CSS that worked in terms of keeping my 3 Vantage headlines/subheadlines on my Home page in a fixed
3-column format, but there were two issues that a bit of code should correct if you could add them for the time being while considering an update to PageBuilder. The issues are: (1) Andrew's code applied to the entire Home page, not just the PageBuilder row containing the 3
Vantage headlines/subheadlines; and (2) the headlines did not resize proportionally as the Home page was resized.
Perhaps there is Custom CSS code that would apply Andrew's fix to that row only, even if there is no code yet for resizing the headlines proportionally?
Hi Greg –
Any new developments on this?
Thanks
Hi :) Unfortunately not at this time. If you’d like to keep an eye on what’s happening with Page Builder updates you can find the changelog here:
https://wordpress.org/plugins/siteorigin-panels/changelog/
Hi Andrew –
Any update on keeping vantage columns together (and reducing the scale) when resizing a page?
Unfortunately not at this stage. For the moment, responsive settings are still only global. There is no way at the moment to turn responsive off for a single row. Sorry we don’t have more yet.
Thanks
help please
hi am using free vintage theme with Hi slider , my slider are not responsive with small device lick mobile
Before install hi slider plugin is responsive with preview nut after install its not responsive with small device lick mobile
Hi Susanta
We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.
Page: New Thread
If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.
Any update on this issue? Thanks, Andrew.
Unfortunately, no change in Page Builder features in this regard since we last chatted.
Is there a similar template you provide that will offer this service?
Thx
The functionality you’re after would need to come from Page Builder. It’s our only plugin that has a grid engine and creates widget areas within them. There are also other Page Builder plugins you could research to see if they have this ability:
Thread: Keep Pagebuilder Columns Together When Reducing Page in Vantage Theme
Still no updates? I am having exactly the same problem. Is there no way to overwrite the code that splits up the columns in the first place?
Thanks,
JDB
Hey Jack
If you open a new thread for this I’d be happy to take a look.
See my reply here: Thread: Pagebuilder more than 1 line in 1 row, problem on mobile phone. It might help you.