Icons moving from left aligned to centered on smaller screens

I have a set of icons stacked vertically in a column.

They are set to left-aligned which works great on desktop, but on smaller screen sizes they jump to the middle.

How do I keep them over on the left on smaller devices please? Icons don’t seem to have the same mobile controls as some of the other modules, so I’ve just got one-setting to left-align them which I’ve selected.

Thanks,
Lee

Hey Lee,

Do you mind sending in the URL of the site so we can take a look? This can probably be done with custom CSS.

Ben

[Content Hidden]

Hey Lee,

Try using the CSS snippet below and see if it works. You’ll want to add an additional class to the column/row where you’d like this to apply to. On the snippet below, the CSS class added would be icon-left.

@media (max-width: 768px) {
  .icon-left .fl-module-icon {
    text-align: left !important;
  }
}

Ben

I couldn’t get this to work Ben, but I’m going to leave it as centrally-justified for now as I need to move on to other tasks to get this site done.

I have another problem now related to the same page :frowning:

I’ve added a button that only shows on small devices for users to click to skip a couple of content sections and head straight to the form at the bottom to save some scrolling.

The button appears as it should, but I’ve customised the look and feel of it using the style tab and whilst these changes show live when editing in the page builder, it doesn’t show when saved.

There’s also a heading on the page that is set to align centre using the mobile options in the style tab and does in the live editing view, but when saved sticks to the left :frowning:

Do you know why style changes to elements might show working great when building the page, but not show on the public page?

The style changes are being saved as when I switch to the page editor again the show up.

Thinking about this more, it could be the same problem preventing the CSS changes to get the icons to align left on small devices…?

Hi Lee,

The problems you’re describing about your changes not sticking are usually associated with website cache add-ons or plugins.

If you are you using any type of dynamic or static cache on your site, try purging them. You might have to do this from your CPanel.

You can also try clearing the Beaver Builder cache:

Go to your Dashboard - Settings - Page Builder - Cache - Clear Cache

That should solve your problem. If not, please let us know.

Colin

Thanks Colin.

The site is hosted with WPEngine so yes it’s cached.

However, I’ve purged the WPEngine cache a few times, and the Beaver Builder cache, and still the styling isn’t showing.

I’ve cleared my chrome cache, checked that chrome is up to date, tried in an incognito window, and tried in Safari.

No joy :frowning:

Here’s a video in case that helps!

https://drive.google.com/file/d/0Bxr3ODO6uaGgWXJmbG5UbHh1Y0U/view?usp=sharing

Sorry you’re still having problems Lee. Thanks for trying all that.

Can you provide a temporary admin login using the "Set as private reply option below?

Thanks,

Colin

[Content Hidden]

Hey Lee,

I tried playing around with your site and I noticed that the CSS is being pulled from a different location(BWP Minify). I think what’s happening is that the plugin stored an old copy of the CSS the site was using previously and is still using that despite changes. I don’t really know how that plugin does its job but could you try disabling it and see if it works?

Ben

I LOVE LOVE LOVE YOU GUYS!!!

That’s it!

I deactivated the Better WordPress Minify plugin and “ta-dah!”

I’ll play around with turning it back on after I’ve finished building out my pages. Hopefully I can deactivate for build mode, then reactivate when done to keep my site speedy. We’ll see.

Thanks so much for your help!

Hey Lee,

No worries! I was gonna suggest you the same thing, to finish the build then reactivate the plugin. Let us know how it goes! :slight_smile:

Ben

Hi Lee,

I had to pop out, so Ben stepped in for me. - Thanks Ben:)

Looks like he’s got to the root of your problem. CSS minifiers are another culprit for causing the problems you’re experiencing.

If I was you, I’d try to disable all your cache and CSS minifiers while developing. That will save you a ton of confusion and pain.

Glad to hear you’ve got it fixed.

Colin