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
Hi Daniel
Thanks for reaching out.
Is the Responsive layout setting enabled within your Features widget?
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!
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.
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!
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.
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.
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: redA 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.
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!
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.
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!
Thanks. Does the URL resolve for you when logged out of WP?
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!
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 :)
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.
Home issue is now fixed. Thank you.
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.