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

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:

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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