Centering text on mobile only

Question

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.

1. You wrote the class name wrong in the HTML class attribute of that element. 2. The element has _inline styles_ that overwrite `text-align` — 04FS, Jan 28 '20 at 13:27

score 3 · Accepted Answer · answered Jan 28 '20 at 13:28

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;
  }
}

Carl Edwards · Answer 2 · 2020-01-28T13:43:28.760

1

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.

edited Jan 28 '20 at 13:43

answered Jan 28 '20 at 13:28

Carl Edwards

13,826
11
57
119

jaydeep patel · Answer 3 · 2020-01-28T13:34:27.387

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. :)

score 0 · Answer 4 · answered Jan 28 '20 at 13:29

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.

Centering text on mobile only

4 Answers4