Change the text-align from right to left on extra small screens

Question

I have a bit of Razor code like this:

if (providerInfo.ProviderSpecialties.Any()) {
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="row">
          <label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
          <div class="col-sm-8 col-xs-12">
            <ul class="control-label resultValueLabel specialtiesValues">
              @foreach (var specialty in providerInfo.ProviderSpecialties) { if (!string.IsNullOrWhiteSpace(specialty)) {
              <li>
                @specialty
              </li>
              } }
            </ul>
          </div>
        </div>
      </div>
    </div>
}

and my CSS is like this:

.specialtiesHeaderLabel {
    text-align: right !important;
    padding-right: 1px;
    color: #c1c1c1 !important;
}

I do need the specialtiesHeaderLabel to be right aligned for most of the sizes but when I go to iPhone 5,6 portrait sizes at that point the label is staying still at right side but I want it to now be on LEFT side. How can I tell it to do that?

bad one:

@Reddy I need help about that, Haven't heard or used them. I am new to all this. — Bohn, May 20 '16 at 13:41
Ok,, check this link http://stackoverflow.com/a/12848217/2592042 you need to put your styles in it.. Is this helpful? — Rajshekar Reddy, May 20 '16 at 13:42

score 2 · Accepted Answer · answered May 20 '16 at 14:41

This should work for you. I also recommend you reading: Using media queries for further explanation on media queries.

.specialtiesHeaderLabel {
  text-align: right;
  padding-right: 1px;
  color: #c1c1c1;
}
@media (max-width: 768px) {
  .specialtiesHeaderLabel {
    text-align: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="row">
      <label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
      <div class="col-sm-8 col-xs-12">
        <ul class="control-label resultValueLabel specialtiesValues">
          <li>
            Hi I'm a Specialty
          </li>

        </ul>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 2 · answered May 20 '16 at 13:45

If you consider "extra-small" like bootstrap does, this means you want to affect phones with a width <= 768px.
In your case, you may want to use media queries (more on bootstrap) like this :

<style>
    media (max-width:768px) {
        /*Css in here will only affect devices with a width of <= 768px*/
    }
</style>

score 1 · Answer 3 · answered May 20 '16 at 13:46

1

Use Media Queries as stated by Reddy. Basically you add the media query and type your styling for that specific size. Foe example, I want to style such that my website works on the Ipad Mini, I will use the tag @media screen and (max-width:768px){<styling here>} and start styling accordingly. If you wish to see how it will look like, right click, inspect/inspect element (depends on chrome, im assuming you are using chrome) then you toggle devices and select the device

answered May 20 '16 at 13:46

Kode.Error404

573
5
24

I did, copied the queries from his link, for starters said ok change the color of that class to yellow, did the Chrome simulation thing and it changed NOTHING. Also does it matter I have !important for right alignment there? – Bohn May 20 '16 at 13:48
Did you check if you styled using the correct class/id? Maybe you selected the wrong element or styled it wrongly? Other than changing via the chrome inspect button, you could use http://whatsmybrowsersize.com/ and manually change the size of the chrome window. – Kode.Error404 May 20 '16 at 13:54
You should use !important very sparingly. Unless you are using an id selector above or !important, your class selector in the media query should override the properties. – Ricky Ruiz May 20 '16 at 13:55

score 1 · Answer 4 · answered May 20 '16 at 13:53

If you think mobile first, you want the label to be left aligned and for devices larger than mobile phones, you want to be right aligned

So you need

@media (min-width: 768px ) {
    .specialtiesHeaderLabel {
        text-align: right !important;
    }
}

this means that label will be left aligned(default value) and for for devices 768px and up will be right aligned. Note: 768px is bootstrap default small screen breakpoint, it can be any value

Change the text-align from right to left on extra small screens

4 Answers4