Title: Text alignment changes in smaller browser window
Last modified: August 21, 2016

---

# Text alignment changes in smaller browser window

 *  Resolved [jamminjames](https://wordpress.org/support/users/jamminjames/)
 * (@jamminjames)
 * [12 years ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/)
 * I posted something in another thread, but it was marked ‘resolved,’ so I’ll post
   it in this new thread.
 * Once the browser is below the width that the second column moves down, everything
   becomes center aligned! It’s crazy.
 * LordMX said in the other thread, to add this css:
 * .csColumn {
    text-align: left !important; }
 * However, that does not fix it.
 * I’ve tried putting that fix in the media breaks as well, to no avail.
 * Please help – this is ruining the plugin for me!
 * [https://wordpress.org/plugins/advanced-wp-columns/](https://wordpress.org/plugins/advanced-wp-columns/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [davidjcolbran](https://wordpress.org/support/users/davidjcolbran/)
 * (@davidjcolbran)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142461)
 * you have to put the style inline for it to work – this thread details – [https://wordpress.org/support/topic/text-alignment-when-viewed-on-smaller-device?replies=7](https://wordpress.org/support/topic/text-alignment-when-viewed-on-smaller-device?replies=7)
 *  [studiokb](https://wordpress.org/support/users/studiokb/)
 * (@studiokb)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142462)
 * 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.
 *  [rarcher30](https://wordpress.org/support/users/rarcher30/)
 * (@rarcher30)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142464)
 * 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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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.
 *  [Brockmann](https://wordpress.org/support/users/brockmann/)
 * (@brockmann)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142467)
 * 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!
 *  Thread Starter [jamminjames](https://wordpress.org/support/users/jamminjames/)
 * (@jamminjames)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142468)
 * 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.
 *  [studiokb](https://wordpress.org/support/users/studiokb/)
 * (@studiokb)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142469)
 * 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.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Text alignment changes in smaller browser window’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/advanced-wp-columns_68202e.svg)
 * [Advanced WP Columns](https://wordpress.org/plugins/advanced-wp-columns/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/advanced-wp-columns/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/advanced-wp-columns/)
 * [Active Topics](https://wordpress.org/support/plugin/advanced-wp-columns/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/advanced-wp-columns/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/advanced-wp-columns/reviews/)

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [text alignment](https://wordpress.org/support/topic-tag/text-alignment/)

 * 6 replies
 * 5 participants
 * Last reply from: [studiokb](https://wordpress.org/support/users/studiokb/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/text-alignment-changes-in-smaller-browser-window/#post-5142469)
 * Status: resolved