htmlcsstwitter-bootstrap-3media-queries
Adjusting bootsrap rows for mobile screen
I'm using bootstrap to style the page, using standard bootstrap classes like container, row, col-sm-offset-n (to get appropriate spacing). But some of the components look very bad on mobile screen.
I have following bootstrap components on my page
container
|------row
|-----bootstrap panel
|------row
|-----div which holds error messages
|------row
|-----a form having a textarea and a button
|------row
|-----span tag
The website looks good on large screen but on smaller screen the textarea within the form gets to the leftmost side of the mobile screen. I want it to be shown in the middle. Similarly the last span tag gets attached to the leftmost side of the mobile screen. I want it to be shown in the middle.
Here is what is looks like on bigger and smaller screens respectively.
Larger Screens
Smaller Screens
You can see the problem here screen size
Below is the markup I used
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/images/favicon.png" type="image/x-icon">
<title>Say your heart out ...</title>
<!--<meta name='viewport' content='user-scalable=no'>-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<link rel="stylesheet" href="/libs/css/toaster.min.css"/>
<script src="/libs/js/jquery.min.js" type="text/javascript"></script>
<script src="/libs/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
<script src="/libs/js/spin.min.js" type="text/javascript"></script>
<script src="/libs/js/angular-spinner.min.js" type="text/javascript"></script>
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<toaster-container></toaster-container>
<br/>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-md-7">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-envelope"></span>
<span><b>So what you wanna do before you die ...</b></span>
<span><a href="/"><span class="glyphicon glyphicon-refresh"></span>Load messages</a></span>
</div>
<div class="panel-body" >
<div ng-cloak class="row">
<div class="spinner" ng-show="formModel.loadingData">
<span us-spinner></span>
<br/><br/><br/><br/><br/>
<p style="text-align:center">Loading Awesomeness ... </p>
</div>
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item" ng-repeat="item in records" on-last-element>
<table>
<tr>
<td>
<img height="60" ng-src="/images/{{($index+11) % 10}}.png" class="img-circle" /> </td>
<td style="">{{item.message}} <span class="text-primary">@{{item.username}}</span></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-7 col-xs-12">
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageEmpty">
Oh gosh ! Really you don't wanna do anything before you are gone !!! ohh... come on
</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageTooLong">
You are trying to do too many things buddy, just 150 characters !!!
</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameEmpty">
Looks like you forgot to mention your name !!!</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameTooLong">
Sorry we can't handle such a long name, please type a short name !!!</p>
</div>
</div>
<div class="row">
<form name="messageForm"
novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<div class="form-group" >
<textarea class="col-sm-offset-4 col-sm-5 col-xs-12 " required
ng-model="formModel.message"
style="border:double 4px #2B689D;border-radius: 0.5em;"
rows="3" id="message"
placeholder="Choose your life's best 150 characters followed by @ and your name, then shoot it.."></textarea>
<br/>
<button style="margin-left: 5px" class="col-sm-1 col-xs-12 btn btn-primary" type="submit">Shoot it</button>
<br/>
</div>
<br/><br/>
<p class="col-sm-offset-3 col-xs-12 col-sm-7 alert alert-success"
style="text-align:center">
e.g. Will love to go to antarctica for adventure, feels kinda penguin@amy
</p>
<br/>
</form>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12">
<span style="font-weight:bold;">
Made with the help of <span style="text-decoration:line-through">5 </span>15 cups of coffee by
</span>
<a style="color:white" href="https://twitter.com/alammahtab08" target="_blank">@alammahtab08</a>
</div><br/>
</div>
</div>
<script src="/libs/js/angular-animate.min.js"></script>
<script src="/libs/js/toaster.min.js"></script>
</body>
</html>
After comments below added bootstrap classes for small screens col-xs and col-sm
Now it looks as this
Solution
Just copy and replace below class in your textarea. Refer below image to understand how column class works.
col-sm-offset-4 col-xs-12 col-sm-5
For spacing problem in mobile view you need to use media query, See the below code. You can add your custom class also for button.
@media (max-width: 768px){
.btn-primary{
margin-top: 2rem;
margin-bottom: 2rem;
}
}
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome