I've just started using bootstrap 3 and whilst playing with the layout I can't seem to get the text to scale on my mobile when within a jumbotron h1 tag. I'm trying to copy the jumbotron on the getbootstrap site which has large text that scales down when the viewport changes.
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<div class="container">
<center><span class="h1">Testing Jumbotron </span></center>
<div class="col-xs-2 col-xs-offset-5 btn-info btn btn-sm">Full</div>
</div>
</div>
</div>
</div>
I've just looked at an example and it seems the heading does scale within bootstrap 3 ... but maybe because I'm using flat-ui it has broken this?
Try changing your html to this.
<div class="container">
<div class="jumbotron">
<div class="row">
<center><span class="h1 col-xs-10">Testing Jumbotron </span>
</center>
<div class="col-xs-2 btn-info btn btn-sm">Full</div>
</div>
</div>
</div>
Simplest way is to use dimensions in % or em. Just change the base font size everything will change.
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
What i know, bootstrap can not scale down text automaticly if you don't do it your self in css.
Have you tried adding media queries.
Example
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) {
.h1 {
font-size:20px;
}
}
Related
When I alter the screen size to a phone view, <div>'s seem to stack in a different order. Is there a way to enforce divs to stack a particular order with media queries, I've tried to search everywhere and cannot find a simple way to do this. I am using Foldy Grids just to use for the responsiveness of them.
Order of divs on a full screen is:
1.)Image on left, text on right
2.)Text on left, image on right
When it goes to a mobile view, I would like it to be stacked from top to bottom in order of:
1.)Image
1.)Text
2.)Image
2.)Text
At present, they order as:
1.)Image
1.)Text
2.)Text
2.)Image
html:
<!-- First section -->
<div class="row">
<div class="grid-2">
<img src="images/EnrolYourself2Small.png">
</div>
<div class="grid-4">
<h1 class="left-align fontAmaticH1">Text............</h1>
<p class="left-align fontPlayfair">More text...........</p>
</div>
</div>
<br>
<!-- Second section -->
<div class="row">
<div class="grid-4">
<h1 class="left-align fontAmaticH1">2nd text.........</h1>
<p class="left-align fontPlayfair">more of 2nd div text........</p>
</div>
<div class="grid-2">
<img src="images/MonitorProgressSmall.png">
</div>
</div>
you should have a look at CSS media queries.
this link might provide you a basis for what you want
For ordering your content, you can choose CSS grid:
Link for the exmaples
And use grid-template on each query depending on the device you are displaying your content
Example:
.main{
display:grid;
grid-template:
'imagespace1'
'textspace1'
'imagespace2'
'textspace2'
}
.image1{
grid-area: imagespace1
}
.image2{
grid-area:imagespace2
}
.text1{
grid-area:textspace1
}
.text2{
grid-area:textspace2
}
#media only screen and (max-width: 500px) {
/* For mobile phones: */
[class*="main"] {
grid-template:
'imagespace1'
'imagespace2'
'textspace1'
'textspace2'
}
}
<div class='main'>
<div class='image1'>image1</div>
<div class='image2'>image2</div>
<div class='text1'>text1</div>
<div class='text2'>text2</div>
</div>
I have half of the page with an h1 (fixed position) and the other col empty. As I scroll down the col moves up the h1 stays fixed... how can I get the h1 to go in an absolute position when switching to a sml or md size screen. I Have this ....
<section id="header">
<div class="container-fluid">
<div class="row height align-items-center">
<div class="col-md-6 text-center position-fixed">
<h1>My h1 title</h1>
</div>
<div class="col-md-6">
<!-- empty column to the right, scroll down -->
</div>
</div>
</div>
</section>
In your css file you can use the #media rule
Here you can see the width of the different bootstrap col sizes.
so in your case 720px for the md is what you want. So this might be the code to put in your css:
#media only screen and (max-width: 720px) {
h1 {
position: absolute;
}
}
I have the following in my Bootstrap layout,
<div class="row mt-4" id="content">
<div class="col owl-carousel">
<div class="slide text-center">
<div class="innerslide">
<h1>Registered In Total So Far</h1>
<p class="split-para align-middle">Total: <span id="total-registered"></span></p>
<p class="split-para align-middle">Durban: <span id="durban-registered"></span></p>
<p class="split-para align-middle">Pietermaritzburg: <span id="pmb-registered"></span></p>
</div>
</div>
<div class="slide text-center">
<div class="innerslide">
<h1>Registered In Last Hour</h1>
<p class="split-para">Total: <span>409</span></p>
<p class="split-para">Durban: <span>345</span></p>
<p class="split-para">Pietermaritzburg: <span>74</span></p>
</div>
</div>
</div>
</div>
What I am trying to achieve is set the mt-4 margin-top row to 0, once the screen is between a certain width. The problem I am having is when the page is viewed in landscape mode on certain size tablets or phones it is pushing the content to far down because I am using a fixed-bottom class for the footer row.
What I would like to do is remove that margin if the screen is in portrait mode and at that width. Using Responsinator, if I am understanding correctly. It is happening when the landscape width is between 667px and 736px.
This is basically what I am trying to achieve:
I have tried with the following code but it does not seem to make a difference:
#media (min-width: 650px) and (max-width: 768px) {
#content {
margin-top: 0;
}
}
I hope this makes sense and would be glad to give further information if required.
Thank you.
EDIT: The solution just posting the correct code here in case it helps someone else. Thank you for the help!
#media screen and (orientation: landscape) {
#content {
margin-top: 0 !important;
}
}
I have a bit of Razor code like this:
if (providerInfo.ProviderSpecialties.Any()) {
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
<div class="col-sm-8 col-xs-12">
<ul class="control-label resultValueLabel specialtiesValues">
#foreach (var specialty in providerInfo.ProviderSpecialties) { if (!string.IsNullOrWhiteSpace(specialty)) {
<li>
#specialty
</li>
} }
</ul>
</div>
</div>
</div>
</div>
}
and my CSS is like this:
.specialtiesHeaderLabel {
text-align: right !important;
padding-right: 1px;
color: #c1c1c1 !important;
}
I do need the specialtiesHeaderLabel to be right aligned for most of the sizes but when I go to iPhone 5,6 portrait sizes at that point the label is staying still at right side but I want it to now be on LEFT side.
How can I tell it to do that?
bad one:
This should work for you. I also recommend you reading: Using media queries
for further explanation on media queries.
.specialtiesHeaderLabel {
text-align: right;
padding-right: 1px;
color: #c1c1c1;
}
#media (max-width: 768px) {
.specialtiesHeaderLabel {
text-align: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
<div class="col-sm-8 col-xs-12">
<ul class="control-label resultValueLabel specialtiesValues">
<li>
Hi I'm a Specialty
</li>
</ul>
</div>
</div>
</div>
</div>
If you consider "extra-small" like bootstrap does, this means you want to affect phones with a width <= 768px. In your case, you may want to use media queries (more on bootstrap) like this :
<style>
media (max-width:768px) {
/*Css in here will only affect devices with a width of <= 768px*/
}
</style>
Use Media Queries as stated by Reddy. Basically you add the media query and type your styling for that specific size. Foe example, I want to style such that my website works on the Ipad Mini, I will use the tag #media screen and (max-width:768px){<styling here>} and start styling accordingly. If you wish to see how it will look like, right click, inspect/inspect element (depends on chrome, im assuming you are using chrome) then you toggle devices and select the device
If you think mobile first, you want the label to be left aligned and for devices larger than mobile phones, you want to be right aligned
So you need
#media (min-width: 768px ) {
.specialtiesHeaderLabel {
text-align: right !important;
}
}
this means that label will be left aligned(default value) and for for devices 768px and up will be right aligned. Note: 768px is bootstrap default small screen breakpoint, it can be any value
I am having problem making footer with pull-left and pull-right then center on mobile devices. Currently on desktop it is displaying properly.
Code(fiddle):
<footer >
<div class="container">
<p>
<div class="col-sm-4 pull-left">
<strong>Powered by Google</strong>.
</div>
<div class="col-sm-4 pull-right">
Terms
<span class="">|</span>
Policy
</div>
</p>
<BR>
<p>
<div class="col-sm-4 pull-left">
Please direct all queries to admin#gmail.com
</div>
<div class="col-sm-4 pull-right">
2.1
</div>
</p>
</div>
As you can see when it is on mobile devices it is displayed as this:
I want to be able to display it similar to this on mobile device where it is centered:
Wrap your col-*** divs in the .row div.
I think you don't need pull-left and pull-right classes. Add col-sm-push-4 class to make right div move to the page's right border
Add custom css to center content on mobile devices, like this:
#media (max-width: 767px) {
.col-sm-4 {
text-align: center;
}
}
Or add custom class to these divs, if you don't want other .col-sm-4 divs to have centered content.
https://jsfiddle.net/1gLmb0yy/6/
You need to use query media to do that, because when the result is pull to right in a small resolution. it will responsive and go to bottom. You can use F12 developer tool to see that.
<footer >
<div class="container">
<div class="col-sm-4 row">
<strong>Powered by Google</strong>.
Please direct all queries to admin#gmail.com
</div>
<div class="col-sm-4 row pull-right">
Terms
<span class="">|</span>
Policy
2.1
<div/>
</div>
</div>
<footer>
Developer tool result.
Example Media Query
#media (max-width: 767px) {
.col-sm-6.row.pull-right {
position: relative;
top: -15px;
}
}