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;
}
}
Related
I have the following structure:
<div class="footer col-md-12">
<div class="social col-md-3 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-4">
<div id="fb"></div>
<div id="linkedin"></div>
<div id="gplus"></div>
</div>
</div>
There is also a div with copyright text, that I can't post. it is before the "social" div. On mobile devices, I am removing the copyright text(via display: none;), and I want to center the social icons, but I am unable to do so. I manage to do it, with margins and percentages, but on a specific resolution only, all other mobile resolutions are broken. Can someone assist me?
Note: I tried changing the xs column width and offset, but no combination managed to center the icons. I am posting the one, that was closest, that I centered with adding some margins.
i think that you just need to use class names in html and css as below
HTML
<div class="footer col-md-12">
<div class="copyright col-md-9 col-sm-8">
copyright information
</div>
<div class="social col-md-3 col-sm-4 col-xs-12">
Facebook -
Twitter -
Linkedin
</div>
</div>
CSS
.social{
background:aqua;
text-align: center;
}
.copyright{
background:silver;
}
#media screen and (max-width: 767px) {
.copyright {
display: none !important;
}
}
and this is the sample : https://jsfiddle.net/Tanbi/asohog47/1/
PS: For understanding clearly i used css background colors.
Have you tried:
.social {
display: block;
margin: 0 auto;
}
I find this works for me in most responsive centering dilemmas (with bootstrap in past times too I believe).
Let us know if this helps?
Hey guys I am trying to create a 50:50 ration on my split screen layout.Text on one side and picture on the other I was able to get this far.
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img" src="assets/img/prg.jpg">
</div>
</div>
</div>
CSS
.img {
width: auto;
height: 250px;
}
Try using Bootstrap's grid system. Here's some example HTML you could use:
<div class="row">
<div class="col-md-6">
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>
This will put the text section on the left side of the page and the responsive image on the right. If the page is collapsed so it can't fit both horizontally they will stack. You can change this if you like. For more information see Bootstrap's guide on the Grid System. http://getbootstrap.com/css/#grid
What you should use is col-xs-6 instead of col-sm-6 because col-sm-x is used for screens with min-width: 768px or higher.
You may be seeing it showing at the bottom because your using sm instead of xs and the screen resolution is below 768px.
I have box in my HTML page. The box width responsive. on desktop it should take 540px width and in mobile the box should take 100% width. the is centre align in desktop. The problem I am facing is that on mobile view the box width is not touching the device width because of container class. This problem can be fixed for using .row class but when I use class it is also expending the width of box on desktop. Can this require be achieved without writing extra media query. fiddle
<div class="container">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
Using media queries is the fastest and most reliable way to attain what you need here I think but If you do not want to then for me my approach is this..
<div class="container hidden-xs visible-sm-block">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
<div class="row visible-xs-block hidden-sm">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
Not tried yet but I think this will satisfy your problem.
Hope it helps
See js fiddle:
Fiddle
Did a new mobile class to remove padding on mobile from container, also added padding:0; on col-xs-12
.col-xs-12 {
padding:0;
}
#media (max-width : 480px) {
.mobile_fix {
padding:0;
}
}
I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side. But having issue when it is displayed on small screens.
This is my current code.
<div class="col-md-8" style="margin-top: 3px;">
<div class="feed-box">
<div class="row">
<div class="col-md-1">
<img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
</div>
<div class="col-md-11">
<div class="row">
<p>John Doe announced something</p>
</div>
<div class="row">
<p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
</p>
</div>
<div class="row">
Comment
Share
</div>
</div>
</div>
</div>
</div>
I will explain it through images:
Desktop (it's fine this padding is not important here):
Small screen (bad):
What I am trying to make (in small screens):
You need to also specify the cols for smaller screens...i.e - you don't need to put in for md
<div class = "row">
<div class = "col-sm-1">
</div>
<div class = "col-sm-11">
</div>
</div>
Use media queries to style the elements for small screen.
For example check this fiddle(resize to see the difference)
CSS used
#media (max-width: 800px){
.feed-box .col-md-1{
float:left;
margin-bottom:8px;
}
.feed-box .col-md-11{
margin-top:15px;
}
}
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;
}
}