Card 1 layout broken

The card 1 and card 2 layouts were broken and I fixed them in version 5.4.0. Specifically, they were not responsive and would run out of their container in certain screen sizes. Go to https://ujsoftware.com/owm-weather-blog/owm-weather-template-comparison/ with a laptop or desktop screen and make the window width smaller. You can see how the various template layouts now adjust nicely to the available width of its parent container.

The fix makes heavy use of the bootstrap 4 and 5 flex functionality (see https://getbootstrap.com/docs/5.1/utilities/flex/). Unfortunately, your website is running bootstrap 3 and cannot load the bootstrap version that comes with OWM Weather on top. Bootstrap 3 does not support flex functionality and has some other differences as you can see when you compare your webpage with my template comparison webpage.

I realize that it’s not easy to upgrade the bootstrap version on a whim. To get your webpage layout fixed, I suggest using a custom template. The approach is described under https://ujsoftware.com/owm-weather-blog/owm-weather-custom-templates/. If you feel comfortable making this change on your website, I can get you the card 1 template from the version prior to 5.4.0. This way, your template will never be overwritten by an OWM Weather update.

Please let me know.

PS: Thank you so much for your generous donation! This is much appreciated!

Thanks for the response!

I’m willing to give it a try, sure. If I can basically create a new folder in my theme folder and drop the template in that, I’m sure I can’t mess it up too badly. How can I get that template file?

But I am concerned that my Bootstrap version is falling behind. Do you recall what it was that’s stopping me from upgrading?

Thanks!

— J.

The Bootstrap 3 CSS seems to come from the plugin called “Formidable Forms” to style its forms. As far as I can tell, there is no such form on the Almanac page.

Before we go the custom template route, its worth trying 2 setting changes to turn off Formidable Forms Bootstrap 3 where it’s not needed and enable Bootstrap 5 for any OWM Weather container. Here are the settings from the WordPress admin screen:

1. Formidable → Global Settings → Bootstrap Styling page → Bootstrap Styling → Only load on applicable pages
2. Settings → OWM Weather → System → Disable Bootstrap → Uncheck (not red)

Once you made the changes, you should visually inspect all pages on your website and verify that everything looks still correct.

Let me know if that works. It would be the best option going forward.

• This reply was modified 2 years, 7 months ago by Uwe Jacobs.

Hi, Uwe —

Thanks for your reply and concern that we take the least invasive approach.

The OWM Weather Card is much closer to what it used to look like, but as you can see, not quite there:
https://www.greylockglass.com/almanac/

I looked at layout settings bun I didn’t see one that seemed like it would be applicable.

So far, all other pages look fine. But then my site is cached at CloudFlare, so who knows what morning will bring after the cache resets!

Thoughts?

—?J.

That looks almost correct, except the boxes shouldn’t have borders and the 3 days should fit in the same line.

I’ll look into some Custom CSS options on how to adjust this for your website.

Cool, thanks! No hurry.

I looked at your website and the fix is simple. Please delete everything in the Custom CSS box under the Layout tab of the Weather post. These are not necessary anymore.

I was very enthusiastic to hear of an easy fix, but, alas, the desired outcome continues to elude us.

I deleted what was in the additional CSS box, and tried viewing the page with Bootstrap both on and off, and the only thing that changed is that the cards are now stacked on top of each other. We may have to throw in the towel on this until Formidable Forms updates to Bootstrap 4 or 5 (is there a polite way to ask them to do that?)

Thanks!

—?Jay

I should have taken a screenshot. I just deleted the Custom CSS additions in the browser development tools and it looked perfect.

You want OWM Weather Bootstrap turned on. Right now, neither Formidable Forms Bootstrap 3 nor OWM Weather Bootstrap 5 is active on the Almanac page. I also still see the Custom CSS on your webpage. Please check if the weather definitions and the system definitions are empty.

To extend on my last reply, I used the browser development tools to manually delete the Custom CSS and load the OWM Weather Bootstrap 5 version. The result looks like this: https://imgur.com/KqUi5Ol

Hey, Uwe —?

Well that’s definitely progress. So, I flipped

The possible places where I know CSS might be hiding are in the OWM Weather Settings, but that box is empty; the Customizer’s “Additional Settings,” which has no Weather code in it, and the plugin, Site Origin’s “Custom CSS” (nothing); or in “Snippets,” (also empty).

Art you able to see where that CSS lives?

Lastly you told me to “check if the weather definitions and the system definitions are empty.” I don’t believe I know what you mean…

Thanks!

Jay

Hi Jay,

In the developer tools, I can see that weather post # 65573 has Custom CSS that affects the daily section.

.owmw-65573 { width: 100% !important; } .owmw-65573 .owmw-forecast .owmw-first, .owmw-65573 .owmw-forecast .owmw-second, .owmw-65573 .owmw-forecast .owmw-third { width: 33%; }

There are 2 spots in OWM Weather where this could come from:

• Weather -> Edit Weather with shortcode 65573 -> Layout -> Custom CSS
• Settings -> OWM Weather -> Layout -> Custom CSS

Hope that helps,
Uwe

Seems you found it. Looks great now!

Uwe