3

Inside my panel I want to set all the text to center align when the page sizes to < 768, but my media query is not working to center the text. Here is my Fiddle

@@media all and (min-width : 768px) {
            .text-left {
                text-align: center;
            }
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group input-group">
          <input type="text" class="form-control" placeholder="Search..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container text-center">
  <div class="row">
    <div class="col-sm-3 well">
      <div class="well">
        <p><a href="#">My Profile</a></p>
        <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
      </div>
      <div class="well">
        <p><a href="#">Interests</a></p>
        <p>
          <span class="label label-default">News</span>
          <span class="label label-primary">W3Schools</span>
          <span class="label label-success">Labels</span>
          <span class="label label-info">Football</span>
          <span class="label label-warning">Gaming</span>
          <span class="label label-danger">Friends</span>
        </p>
      </div>
      <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <p><strong>Ey!</strong></p>
        People are looking at your profile. Find out who.
      </div>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-7">
    
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <div class="panel-body">
              <p contenteditable="true">Status: Feeling Blue</p>
              <button type="button" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-thumbs-up"></span> Like
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well">
           <p>John</p>
           <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well">
           <p>Bo</p>
           <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well">
           <p>Jane</p>
           <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well">
           <p>Anja</p>
           <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-2 well">
      <div class="thumbnail">
        <p>Upcoming Events:</p>
        <img src="paris.jpg" alt="Paris" width="400" height="300">
        <p><strong>Paris</strong></p>
        <p>Fri. 27 November 2015</p>
        <button class="btn btn-primary">Info</button>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

UPDATE! - I set the media query to

@@media only screen and (max-width : 767px) {
        .text-left {
            text-align: center;
        }
    }

and when I open Chrome it works fine. But if I open IE 11 when a default window size of something around 900px the text is centered (not good). FYI - if I do a slight window resize the text re aligns back to the left! Is this a weird IE bug??

4

4 Answers 4

3

Have you set a viewport meta tag?

<meta name="viewport" content="width=device-width, initial-scale=1">

It this tag is not set, media queries will not work predictably.

1
  • Solved my problem:)
    – prototyp
    Oct 12, 2018 at 10:28
2

For Small Device You can't use min-width.

Best way you can specifice all Min and Max.

@media all and (max-width: ***px) and (min-width: ***px){ }

More Example:

@media only screen and (min-width: 768px) {
    /* Tablets and Desktop */
}

@media only screen and (max-width: 767px) {
    /* Phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* Portrait Phones */
}

Are you worried about all and only screen ?

Please make a scene about this Article Link: link_1 Link_2

Also You can read some few Stackoverflow Q about this:

Question

Update Answer for Problem of IE -11

Same Question on Stackoverflow Link_1 Link_2

Solution:

@media all and (max-width: ***px) {
     //Media Query CSS
    }

Live_link: link_1 link_2

3
  • ok so I use @media only screen and (max-width: 767px) and it works fine in Chrome, but when I open it in IE 11 the text is centered even when the screen is bigger then 767px. Why is IE acting funky but Chrome is ok?
    – chuckd
    Nov 5, 2016 at 18:07
  • If I do a slight resize of the screen, the text shifts back to left-align! Is this a weird IE bug?
    – chuckd
    Nov 5, 2016 at 18:13
  • give me moment for make more information about your problem
    – MD Ashik
    Nov 5, 2016 at 18:14
1
@media all and (max-width : 768px) {
            .text-left {
                text-align: center;
            }
        }
1

It's not @@media, instead it's @media.

@media all and (min-width: 768px) {
  .text-left {
    text-align: center;
  }
}
3
  • I'm using ASP.Net MVC and it is @@media, not @media
    – chuckd
    Nov 5, 2016 at 18:06
  • Glad you mentioned that in your question and downvoted my answer. Take a look at your own fiddle, using @media. It's working as expected. jsfiddle.net/fht0wtwp/1
    – Aer0
    Nov 5, 2016 at 18:08
  • I guess my concern is more about IE vs Chrome, even though I didn't mention it in the original post. It works fine in Chrome, but if I open IE and start the page at something like 850px the text is centered (not good), and if I do a very slight resize the window re sets the text appropriately (left align). Whhy is thios only in IE and not Chrome?
    – chuckd
    Nov 5, 2016 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.