Home>Support>Responsive row/columns (with border and gap) on Corp

Responsive row/columns (with border and gap) on Corp

Hi,

I am trying to redo a web page (https://www.hope-trauma-therapy.com/#AboutUs) using Corp theme.

I have a row of 3 columns with the same height. Each column has a “Features” widget with 1 feature.
Is there a way to make the row / columns responsive? That is: for a narrower screen, columns will collapse and line up vertically.

Alternatively, I tried using 1 Features widget with 3 features but cannot set the features to line up nicely. By nicely, I mean the features have the same top and the same bottom. How do we do that?

Thank you in advance for your help.

-Daniel

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

  1. 16 days, 7 hours ago Andrew Misplon Hi, I Work Here

    Hi Daniel

    Thanks for reaching out.

    Is the Responsive layout setting enabled within your Features widget?

  2. 15 days, 23 hours ago Daniel Hendargo

    Hi Andrew,

    Thank you for your response. Yes, the “Responsive layout” setting is enabled in the Features widget?

    To be clear,
    1. The old web page https://www.hope-trauma-therapy.com/#AboutUs is not created using SiteOrigin. I used nimble plugin.
    2. I tried 2 different ways using SiteOrigin:
    a. 1 row with 3 columns. Each column has 1 Features widget with 1 feature. “Responsive layout” enabled. This is probably not expected to collapse, because the “Row” doesn’t have “Responsive layout” setting. If we can make the row’s columns collapse, problem is solved.
    b. 1 Features widget with 3 features. “Responsive layout” enabled. This collapses the features, but the issue is that I cannot have them look nice when all three are displayed in a row (like on a desktop). Each feature has its own height, so the top is aligned but the bottom is not.

    Thanks!

  3. 15 days, 14 hours ago Andrew Misplon Hi, I Work Here

    Hi Daniel

    Thanks for the update.

    One row with three columns should be collapsing on mobile. You can try editing the row, check the Layout section on the right, ensure Row Layout is set to Standard. If it is, please, send a link to the page and we’ll take a look.

  4. 12 days, 6 hours ago Daniel Hendargo

    Hi Andrew,

    Sorry for my late response. I was away from this but am back now. I checked the Row Layout and verified that it was/is Standard.
    Please take a look at the section “About Us #1” on this page: https://hopetraumatherapy.live-website.com/home#about-us
    The grey text background is there for testing only.

    Thanks!

  5. 12 days, 6 hours ago Andrew Misplon Hi, I Work Here

    Thanks for the update. Please, can you send me an export of the Layout Block. Within Page Builder click LayoutsImport/ExportDownload Layout. Upload the JSON file to Dropbox or similar and send us the link. I’ll take a look locally and advise from there. I’m not immediately seeing the issue in the page markup.

  6. 12 days, 5 hours ago Daniel Hendargo

    Per your request, below is the link to the downloaded layout on dropbox
    https://www.dropbox.com/s/oawn8uf86e7ndhr/htt-home-layout.json?dl=0

    Thank you for your help.

  7. 12 days, 5 hours ago Andrew Misplon Hi, I Work Here

    Super, thanks.

    The Hero widget in the first row has a CSS rule inserted into the CSS Declarations field. The field should ideally only be used for declarations, a property, and a value, one declaration per line. ; is not required at the end of each declaration for this field.

    color: red

    A bit more on the topic here: Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes.

    Please, try removing the CSS rule in question, it should resolve the page collapse issue.

  8. 12 days, 3 hours ago Daniel Hendargo

    That’s it! Good catch, Andrew!

    While at this, can you please take a look at https://hopetraumatherapy.live-website.com/home#meet-us?
    Is there a way to vertically align the “Contact Us” and “Call (818) ” features to the bottom of each column?
    Let me know if you prefer this to be on a separate thread.

    Thank you very much!

  9. 12 days, 3 hours ago Andrew Misplon Hi, I Work Here

    Glad to hear you’re making progress.

    Please, can you confirm the above URL is correct? I’ll take a look ASAP when I’m back on tomorrow my time.

  10. 12 days, 3 hours ago Daniel Hendargo

    Yes, the URL is correct: https://hopetraumatherapy.live-website.com/home#meet-us
    This section has a row with 3 columns. In the second and third columns, there are 2 features:
    1. Top feature: leaf and some text. By default, the leaves are vertically aligned nicely.
    2. Bottom feature: “Contact Us” on the second column, “Call (818)…” on the third column. I thought it will be nice if they can be vertically aligned so the bottoms lined up

    Thanks!

  11. 12 days, 3 hours ago Andrew Misplon Hi, I Work Here

    Thanks. Does the URL resolve for you when logged out of WP?

  12. 12 days, 2 hours ago Daniel Hendargo

    It does. I tried it on another browser (firefox) with all history, all cookies, etc removed, and the page loads.

    Related to this, if user clicks on the site logo (on the upper left corner), it looks broken:
    the page loads only displays menu but the landing page (Home) is not displayed.
    This brings up another question: what do I need to do so clicking on the site logo will go to the “Home” page?

    Thanks!

  13. 12 days, 2 hours ago Andrew Misplon Hi, I Work Here

    Thanks. The page returns not found for me. The page loads if I VPN in from the States. I have access now so that’s sorted, thanks. The logo is linked to the home URL: https://github.com/siteorigin/siteorigin-corp/blob/develop/inc/template-tags.php#L103. I’ll dive into the above questions when I’m back on tomorrow GMT+2. Chat then, cheers :)

  14. 12 days, 2 hours ago Andrew Misplon Hi, I Work Here

    For the home issue, you can head over to SettingsReading and check what the assigned Homepage is. There might be more to look at but, at a glance, that’s where I’d start.

  15. 11 days, 18 hours ago Daniel Hendargo

    Home issue is now fixed. Thank you.

  16. 11 days, 14 hours ago Andrew Misplon Hi, I Work Here

    Glad to hear you’re making progress.

    At the moment we, unfortunately, don’t have a settings method of shifting the last feature to the bottom of the column.

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More