I am trying different things to adjust the margin left for mobile (different)screen size. I am setting margin according to medium screen size using margin-left. And want to adjust for small screen size. Generally which method is useful and papular. Nothing is working in my case.What is wrong?
Can someone explain it with example. I am able to adjust screen size for column grid. But heading and header and footer is the issue. If I give heading and make it horizontal-align using margin left. How to change it for different size screen? What is wrong?
1)Do I need to add different style tags for each of them(mobile and medium size using media query. It is not working.)
2)I trying to add class visible-xs and add mobile-margin (h1 view on mobile)
3)Add bootstrap utility class (h1 Utility class)
<script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- font awsome -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</script>
<style>
.read{
width:300px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 50px;
padding-top: 8px;
margin-left: 400px;
margin-top: 100px;
}
.learn{
width:300px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 50px;
padding-top: 8px;
/* margin-left: 400px;*/
/* margin-top: 300px;*/
}
.mobile{
width:400px;
height:70px;
border-radius: 40px;
background-color: darkgoldenrod;
padding-left: 100px;
}
.mobile-margin{
margin-left: 50px;;
}
#media only screen and (min-width : 320px) {
margin-left: 50px;
}
#media only screen and (min-width : 768px) {
margin-left: 400px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="read">Read more</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 ml-md-4 ml-sm-1">
<h1 class="learn">Utility Class</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="mobile-margin visible-xs">
<h1 class="mobile">view on mobile</h1>
</div>
</div>
</div>
</body>
You can try Bootstrap classes to adjust according to the screen sizes. First set a default (mobile) and then change using md or lg:
<div class="row">
<div class="col-md-3 ml-0 ml-lg-5">Margin Test</div>
<div class="col-md-3 ml-0 ml-lg-3">Margin Test</div>
</div>
margin-left is set to 0 for mobile screens and margin-left is set to 5 for large screens
I give you an example of a heading H1 element.
First make sure to add bootstrap css link correctly to your page.
In bootstrap you can use the m class for margin and the p class for padding. In addition you can optionally set the side on which you want to apply margin or padding. Use ml for example to set margin left. You can give it a value between 0 and 5. For example, ml-3. You can also specify multiple values for multiple screen sizes as shown in the below example:
<h1 class="ml-5 ml-md-3 ml-lg-0">Header Text</h1>
In this example, the heading element will have a margin of 5, it will change to 3 when screen size reaches medium and it will change to 0 when screen size reaches large.
All you have to do is give the class name in the media screens.You haven't given your class name and just given margin-left
#media only screen and (min-width : 768px) {
margin-left: 400px;
}
You can specify the name like this
#media only screen and (min-width: 320px) {
.read {
margin-left: 50px;
}
}
#media only screen and (min-width: 768px) {
.read {
margin-left: 400px;
}
}
You can center the heading through
<h4 class="text-center">
<h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4>
<h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4>
<h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4>
and for buttons centering
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
Related
I am trying to build my UI using Bootstrap. I am trying to set 3 divs in one row next to each other for medium and large screens. And for
under 768px I would like to place them one under another.
file.html
<section className="about" id="about">
<div className="container-fluid">
<div className="row boxes justify-content-md-center">
<div className="col-sm-12 col-md-4 box">
<div className="innerBox">
<div className="icons">
<img src={iconEducation} className="img-responsive" />
</div>
<div className="box-body">
<h3 className="box-title">Title </h3>
<div className="box-list">
<div className="box-list-items">
<div className="item-ul"><img src={dot} className="img-responsive" /></div>
<div>
<p>Text</p>
</div>
</div>
<div className="box-list-items">
<div><img src={dot} className="img-responsive" /></div>
<div className="item-ul">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
The HTML code is the same for all three divs.
Problem
On large and medium screens I have two divs in one row and a third underneath in new row. For tablet screens the divs do not flow one under another but are still in the same row. The layout I want is two in one row and the third underneath.
file.css
.about{
padding: 127px 0 196px 0;
}
.about .row.boxes >div{
margin: 0 20px 0 20px;
}
.about .box{
height: 550px;
width: 100%;
background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
margin: auto;
color: black;
width: 100%;
overflow: hidden;
}
.box-list-items > div {
display: inline-block;
}
.box-list-items img {
height: 35%;
width: 35%;
}
.icons {
height: 95px;
width: 95px;
float: right;
margin: 7% 5% 5% 0;
}
.icons img {
width: 100%;
height: 100%;
}
h3.box-title{
font-size: 2.7em;
}
As I was going through the Bootstrap docs I thought that naming the class as .col-md-4 would align my divs for above 768px in same row one next to each other and underneath would place them in kind of display: box view.
theres is no use of #media only screen and all ,this will work:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">xyz</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">123</div>
</div>
</div>
you can check:
https://jsfiddle.net/bfos8ttd/
you need to put all the code in file.html in side a div with class row and test it again.
Go to this Link for bootstrap columns (col-lg-4, col-md-4, col-sm-6, col-xs-12)
And follow these media query as per your device.
#media only screen and (min-width:1024px) and (max-width: 1200px) {
}
#media only screen and (min-width:992px) and (max-width: 1023px) {
}
#media only screen and (min-width:768px) and (max-width: 991px) {
}
#media only screen and ( max-width: 767px ) {
}
#media only screen and ( max-width: 479px ) {
}
#user9347049 This wouldn't fit in the comments, so I'm putting it here for clarity.
Your container-fluid lets you use the entire width of the screen, but it's still just a container, that contains your rows and columns. You create rows, then, you add columns. As in:
<div class="container"> <!-- you can change this class to container-fluid class if you like -->
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
You can only have one container class. The row div contains all your cols divs for that row. You can have as many rows of columns as you need. If you adapt you code, you should start getting some of the results you're looking for before you look at the media query side of it.
I have this page that has a fixed footer and header http://magician-bombs-84382.bitballoon.com/
On the footer, I have 4 buttons but the buttons align vertically when the width resizes to less than that of large screens. I am making a page to fit mobile device within this range of media queries
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
The app I'm making will be locked to portrait view, so I'm not thinking of ever accessing the page on large screens.
After looking at the bootstrap.css file, I cannot seem to pinpoint the code responsible for arranging the buttons vertically instead of horizontally following the col-md-3 order available inside the class row.
How can I arrange the buttons horizontally? Removing the position: absolute for footer does not seem to solve it.
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Use .col-xs-3, it won't break on extra small screens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
</div>
</div>
</footer>
It works fine and buttons don't hide also.
Fiddle demo
.footer {
bottom: 0;
width: 100%;
background-color: #f5f5f5;
}
I have a page title <h1> MY JOB </h1> with a font size of 70px. I want to automatically change the size of the title to font size 36px when the page reaches a small breakpoint (mobile phone).
How can I achieve this?
Here is what I have done so far:
.title-extra-large-5 {
font-size: 70px !important;
line-height: 80px;
}
#media (max-width: 767px){
.xs-title-extra-large-4{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
<h2 class="title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4">MY JOB.</h2>
</div>
</div>
</div>
In your question, you mention that your title is h1, but, in your example, you use h2.
Apart from that, you are on the right track. You just need to change couple of things:
h2 {
font-size: 70px !important;
line-height: 80px !important;
}
#media (max-width: 767px){
h2{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8">
<h2>MY JOB.</h2>
</div>
</div>
</div>
You do not need to refer to col-sm-12 and col-xs-12 as bootstrap will render into them by default. And you do not need to have extra classes title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4 you can just refer to h2 or h1.
I'm assuming by certain screen size, you want to change it, right?
ACCORDING TO W3SCHOOLS.COM
You can use the #media property to display a certain set of styles in a certain situation.
body{
background-color: blue; /*For screens with more than 480px screen width.*/
}
p{
font-size:72px;
}
#media screen and (max-width: 480px) { /*Same but for less*/
body {
background-color: lightgreen;
}
p{
font-size:36px;
}
}
Comparing this to your code, I'd say you've got it mostly correct, but be leniant on !important. This can conflict with other styles, so only use it when you do NOT want it to change, or the style won't be applied otherwise.EDIT: It seems you have two classes which do the exact same thing, but conflict with each other due to !important. I'd say just keep one of the classes and change the styles with #media so you're gauranteed it'll work and that it won't conflict with other styles.
My portfolio website uses rows to display full-width images. These look fine on my desktop and ipad but once viewed on a phone there seems to be margins on the left and right.
Here's the code:
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-xs-12">
<img src="img/focus.jpg" class="img-responsive" alt="Focus Ireland"></a>
</div>
</div>
</div>
</section>
The site is live at http://www.burnser.com/index.html
Any help would be most grateful. Thanks in advance.
the col-xs-12 class from Bootstrap has a padding.
padding-right: 15px;
padding-left: 15px;
That padding is set to 0 in screens bigger than 768px.
So if you want to remove the padding, you could override those properties in your css file.
Need to change
.col-xs-12{
padding-right: 15px;
padding-left: 15px;
}
to
.col-xs-12{
padding-right: 0;
padding-left: 0;
}
Currently it's only set for min-width: 768px
#media (min-width: 768px)
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
Can anyone tell me how to ensure I get white space/margin on the left hand side and right hand side when the page is viewed on a mobile phone?
My CSS is:
#maxCostSlider {
max-width:304px;
width:304px;
padding:0px;
margin-left:-6px;
}
#media (max-width: 480px) {
#maxCostSlider,#sliderScale {
margin-left: 20px;
margin-right: 20px;
}
}
HTML is:
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive" />
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-4 col-md-4">
<input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" />
</div>
</div>
</div>
This all looks good on a desktop and an iPad but when viewed on an iPhone the bootstrap-slider widget spans the entire width of the device. I would like to ensure there is always a margin of at least 20px either side of the two rows. Ideally the bootstrap-slider would scale to fit.
Hard to tell without know the exact slider component you are using, but adding this to your CSS should work:
#maxCostSlider {
margin-left: 20px;
margin-right: 20px;
}
However if you only want that to happen at mobile width, wrap it in a media query:
#media (max-width: 480px) {
#maxCostSlider {
margin-left: 20px;
margin-right: 20px;
}
}
For small device(sm) and extra small device (xs) you can call them separately.
<div class="col-sm-offset-1 col-xs-offset-1 col-md-offset-4 col-md-4"></div>
And another way you can do this by css.
#media (min-width: 240px) and (max-width: 480px) {
#max-cost {
padding-left: 20px;
padding-right: 20px;
}
}