CODEWITHSUNDEEP
cssclassname
Connie
Connie

Reputation: 47

Centering text on mobile only

I'm pretty new to advanced CSS. I have a custom heading section which i want to make centered on mobile only. I have added a class name and the following code but nothings happened.

.mobile-text {
  text-align: right;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

This is the homepage of this site and the paragraph is the following:

REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.

Upvotes: 5

Views: 12683

Answers (4)

Carl Edwards
Carl Edwards

Reputation: 14434

max-device-width will target the width of the entire device area (i.e the device screen). Instead use max-width, which will target the width of the entire browser area. 

@media (max-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

Note: device-width queries are deprecated.

Upvotes: 1

jaydeep patel
jaydeep patel

Reputation: 917

Your media query is not working on desktop if you are check in desktop view.

And also your class declaration is wrong please remove . from mobile-text. :) 

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Please use @media all and (max-width: 600px){}

For more details please visit here

Hope it will help you. :)

Upvotes: 0

johannchopin
johannchopin

Reputation: 14844

When I check the html of your page I can see the class="" of this <h4>:

class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

In your css you want to manipulate it using the .mobile-text class. Problem here is that you define this class in your html using .mobile-text. That's actually wrong, you need to define it with only mobile-text like this:

class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

The . is actually a css selector for a class like # is a selector for an id.

Upvotes: 0

Shiny
Shiny

Reputation: 5055

Your class on the website is .mobile-text, and it should be mobile-text - The . is only used in selectors to say that the following text is a class name

Also, your inline styles on the element ( style=font-size: 35px... etc ) is overwriting your changes - you can use !important to handle this lazily

.mobile-text {
  text-align: right !important;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center !important;
  }
}

Upvotes: 3

Related Questions