Text alignment changes in smaller browser window

you have to put the style inline for it to work – this thread details – https://www.ads-software.com/support/topic/text-alignment-when-viewed-on-smaller-device?replies=7

I know this is an old thread, but for anyone else trying to solve this, it can be done with css:

@media only screen and (max-width: 1024px)
.csRow .csColumn {
text-align: left !important;
}

By default the text aligns center when browser width goes to 1024px and below. By adding the .csRow this makes the selection more specific and thus overwrites the inline style.
You need to add this in your theme’s css file, or the theme’s options page might have a field for custom css.

I just came across this same problem. This IS crazy right? Forcing people on mobile devices to read centered text is akin to water torture, it just kills your UX – I’m not sure what your intention here is LordMX, but I am totally missing it…

Plus the fact you have injected the style inline into the page at runtime and you are using !important declarations is cause for some concern. I mean couldn’t it have gone in an external css so we have the easy option of changing it if we don’t like it, which is most likely 99% of us. !important just bothers me and I try to use it sparingly.

My hat off to you @studiokb, using that level of specifity did the trick. I went looking through the plugin source code to see where i could edit the ‘baked in’ inline styling but I could not find it and I was going a bit nutes (this is WHY we should try to avoid !important in css people. It is almost as bad as abusing tables and frames back in the day…)

Also I did not like the marging and width, so I adjusted those also.

@lordmx, this could be a much better plugin. It’s interface is great and easy to use but it adds all this extra code ‘guff’ into the visual editor that just seems uneccessary.

Briefly looking into your plugin files it appears as though you are leveraging off the framework responsive capabilities of Twitter Bootstrap. When I use Bootstrap the code is much cleaner, i.e.:

<div class="containter"
<div class="row">
<div class="col-md-4">My first column</div>
<div class="col-md-4">My second column</div>
<div class="col-md-4">My third column</div>
</div>
</div>

You’ve already heard by suggestion above about the centering of text, please fix it in your next update, I don’t believe it is good design and there should be no need for it. Humans (well westerners anyway) prefer to read text from right to left. Centering small content can work but blocks of text is no good.

Hi,

Can someone please tell me where in the CSS to insert the:

@media only screen and (max-width: 1024px)
.csRow .csColumn {
text-align: left !important;
}

Cant get it to work… Many thanks in advance!

As studiokb said:

You need to add this in your theme’s css file, or the theme’s options page might have a field for custom css.

However, rather than the theme’s css file, which will get written over the next time the theme updates, it should go either in a custom css field your theme might have, or a child theme style.css file.

Yes, in a child theme is the best option provided you’re using one.
If your theme has an options page (Theme name often appears in admin menu) there may be a field to add custom css.
If not using child theme, then worse case scenario (because it could be overwritten in a theme update) is to put it at the bottom of your theme css file. This can be done in the admin area, got to Appearance > Editor and make sure you have selected the style.css file.

Still surprised the author hasn’t fixed this to not use the !important rule.