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;
}
}
Related
I am trying to have three different layouts
Desktop- image + text block on top of a page
Medium devices- image on top of a page and text on the bottom of the page
Mobile- text on the bottom of the page
I have figured out how I want to do the desktop and the mobile, and I thought I had the medium devices figured out, but it isn't working correctly.
HTML
<div class="some-container--top">
<div class="row">
<div class="column image">
<img src="{image url}" alt="alt" />
</div>
<div class=" column container">
<img src="{image url}" alt="color" />
<div class="text-block">
<h3>title</h3>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="some-container--bottom">
<p>text</p>
</div>
CSS:
#media only screen and (min-width: 1000px){
.some-container--bottom{
display:none;
}
}
#media only screen and(max-width:999px) and (min-width:601px){
.container{
display:none;
}
.some-container--bottom{
display:none;
}
}
#media only screen and (max-width: 600px){
.some-container--top{
display:none;
}
}
So, desktop works (i.e, I have the picture and the text showing up correctly) and mobile works ( I have the text showing up where I want). However, for my medium devices it shows everything( text and image on both bottom and top of page). What is wrong with my code?
There is an error in your css-rule:
#media only screen and(max-width:999px) and (min-width:601px){
^ There must be a space between 'and' and the opening parenthesis
Demo
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;
}
}
I have 3 HTML div elements that I'd like to see sit side-by-side on a wide screen but, as the screen width collapses, I'd like to see them become vertical.
For example...
Wide screen:
-----------
abc def ghi
-----------
Narrow screen:
abc
def
ghi
Currently, having three HTML divs that look as follows (in another div block) only lays them out vertically...
<div id="Master_Div">
<div id="Div_1">
<p>abc</p>
</div>
<div id="Div_2">
<p>def</p>
</div>
<div id="Div_3">
<p>ghi</p>
</div>
</div>
Maybe, the answer is tied to media queries and/or responsive design but I'm not sure.
Thanks for any help you can offer.
I would do something like this unless you actually need to apply an ID, classes are easier for multiple divs with one assignment in css, plus they take up less space.
html---
<div class="wrapper">
<div class="third">Something here</div>
<div class="third">Something here</div>
<div class="third">Something here</div>
</div>
css---
.third {
width: 33.333333%
float:left;
}
#media screen and (max-width: 767px) {
.third {
width: 100%;
float:none;
}
}
Yes, there are media queries that allow you to control layout for mobile screens, ex:
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* stack vertically */
}
A simple media query can do this.
/* Apply inner styles if the viewport's width is at least 500px */
#media (min-width: 500px) {
.responsive {
width:33.3333%;
float:left;
}
}
<div id="Master_Div">
<div class="responsive" id="Div_1">
<p>abc</p>
</div>
<div class="responsive" id="Div_2">
<p>def</p>
</div>
<div class="responsive" id="Div_3">
<p>ghi</p>
</div>
</div>
Your problem is best resolved by natural design patterns without resorting to media queries. Think about it this way , if you lay out your columns side by side using css float:left; and you define some min-width value per column. then as soon as the screen width becomes smaller than the width value you defined X 3 , your columns will be laid out vertically
I have a container that I'm setting to be absolutely positioned on a page because I want it to float over the background content. The problem is that the container is not 100% of the width of the screen. As a result, even though the col widths are appropriate and the content is in fact centered in the row, it appears totally off.
Any thoughts?
View code:
<div class="container home-marketing">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
<p class="jumbotron-marketing">Rent the gear you need to get outside</p>
<p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
<p class="jumbotron-marketing">Save money, save time, save space</p>
</div>
</div>
</div>
CSS code:
/* NOTE adding width: 100% does NOT help */
#media only screen and (min-width : 320px) {
.home-marketing {
position: absolute;
padding-top: 65%;
}
}
#media only screen and (min-width : 768px){
.home-marketing {
position: absolute;
padding-top: 20%;
}
}
#media only screen and (min-width : 961px){
.home-marketing {
position: absolute;
padding-top:27%;
}
}
Rendered HTML
You can see that the home-marketing container is different because the computed width is 646.661926269531px, but for the navbar for example, the computed width is 970px
Why you are adding class container to absolute element?
.home-marketing{
width:100%;
}
<div class="home-marketing">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
<p class="jumbotron-marketing">Rent the gear you need to get outside</p>
<p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
<p class="jumbotron-marketing">Save money, save time, save space</p>
</div>
</div>
</div>
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;
}
}