Home>Support>Keep Pagebuilder Columns Together When Reducing Page in Vantage Theme

Keep Pagebuilder Columns Together When Reducing Page in Vantage Theme

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!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 7 days ago cames

    An example closer to home = site origin.com home page! See items below the main image.

  2. 7 years, 3 days ago cames

    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?

  3. 6 years, 11 months ago cames

    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!

  4. 6 years, 10 months ago Private Message - surveydesigner

    This is a private message.

  5. 6 years, 10 months ago Daniel Hi, I Work Here

    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.

  6. 6 years, 10 months ago cames

    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

  7. 6 years, 10 months ago cames

    *icon

  8. 6 years, 10 months ago Daniel Hi, I Work Here

    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

  9. 6 years, 10 months ago cames

    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

  10. 6 years, 10 months ago Daniel Hi, I Work Here

    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.

  11. 6 years, 10 months ago cames

    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?
     

  12. 6 years, 10 months ago Daniel Hi, I Work Here

    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

  13. 6 years, 10 months ago Private Message - WordPress

    This is a private message.

  14. 6 years, 10 months ago cames

    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 

  15. 6 years, 10 months ago cames

    did you get the notice and password? 

  16. 6 years, 10 months ago cames

    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. 

  17. 6 years, 10 months ago Andrew Misplon Hi, I Work Here

    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;
    }
    }
    
  18. 6 years, 10 months ago cames

    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. 

  19. 6 years, 10 months ago cames

    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 

  20. 6 years, 10 months ago Greg Priday Hi, I Work Here

    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.

  21. 6 years, 10 months ago cames

    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?

  22. 6 years, 9 months ago cames

    Hi Greg – 
    Any new developments on this?
    Thanks 

  23. 6 years, 9 months ago Andrew Misplon Hi, I Work Here

    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/

  24. 6 years, 8 months ago cames

    Hi Andrew – 
    Any update on keeping vantage columns together (and reducing the scale) when resizing a page?

  25. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    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.

  26. 6 years, 8 months ago cames

    Thanks 

  27. 6 years, 6 months ago susanta

    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

    • 6 years, 6 months ago Andrew Misplon Hi, I Work Here

      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.

  28. 6 years, 4 months ago cames

     
    Any update on this issue?  Thanks, Andrew.

  29. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Unfortunately, no change in Page Builder features in this regard since we last chatted.

  30. 6 years, 4 months ago cames

    Is there a similar template you provide that will offer this service?
     Thx 

  31. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    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

  32. 6 years, 1 month ago Jack Bruce

    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

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More