Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!
Related
I'm struggling to use Tailwind CSS to display inline on large sizes and block on small sizes.
Below is my code:
<div class="block md:flex md:justify-between md:text-left text-center">
<div class="order-2 md:order-1">Div 1</div>
<div class="order-1 md:order-2">Div 2</div>
</div>
On a large screen it should look like:
Div 1 Div 2
and on a small screen:
Div 2
Div 1
Media Queries
You can use media queries to change styling depending on certain conditions:
<div class="container">
<div>ONE</div>
<div>TWO</div>
</div>
.container {
/* Mobile by default as Roy pointed out */
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
/* For desktops */
.container {
flex-direction: row;
}
}
Here is a JSFiddle for you to play with.
If you really want to check whether it is a mobile device, there is probably a library for that in the framework you are working with.
Or you can check for it yourself with some JavaScript as explained here with some examples.
But the device type should not actually affect the decision of how to display items. You should just take into account screen size and ratio, and thus use the media-query.
Your code seems correct, but if default tailwind breakpoints don't fit your needs, you can define your own custom breakpoints.
https://tailwindcss.com/docs/screens
I am trying to display a different layout for my mobile views. In the desktop view using the grid system I have 4 columns each with 2 columns an image and a label+value. In mobile I want to skip the image column and for the label and value I want them next to eachother so something like:
This is a label : this is a span.
1 column in the desktop version looks something like this:
<div class="col-md-3">
<div class="col-md-2">
<p>col-md-4</p>
</div>
<div class="col-md-10">
<div>This is a label</div>
<span>This is a span</span>
</div>
</div>
I tried to use col-sm-3 but it still displays in the desktop? How can I get the mobile view with the label and value next to eachother?
See also:codepen
you can use bootstrap css class :
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
Using a media queries you can change the attributes of elements/classes/IDs based on screen size. You may be particularly interested in using display: none; as follows:
CSS
/*For smartphone and small devices*/
#media only screen and (min-width: 480px) {
.hide-me {
display: none;
}
}
/*For tablet sized devices and larger*/
#media only screen and (min-width: 748px) {
.hide-me {
display: block;
}
}
Of course you can double up the functionality of col-xs-3 (or any of your choosing) but using that as your class selector in the media query.
#media only screen and (min-width: 748px) {
.col-xs-3 {
display: block;
}
}
Check out some standard documentation responsive design - especially those provided by Twitter! Mobile first is common, where you start with the smaller media queries then get bigger.
http://getbootstrap.com/css/
I have my simple markup
<div class="row">
<div class="col-lg-6 loginField">
data
</div>
<div class=" col-lg-6 loginField">
<div class="">
test
</div>
</div>
</div>
.loginField{
background-color:white;
}
so my problem is that i am getting 1 white line on desktop screen, but i want to make a 10 px space between those 2 columns without destroying responsive design. Right now if i switch to smaller screen it works, but on desctop there are no space, and if i add margin, this margin presist on smaller screens which is ugly.
P.S. when i say it works on smaller screens, i mean that those 2 columns move under each other and width of the white lines are as they shopuld be.
You simply need to mimic the same breakpoints in the responsive design as is in bootstrap.css:
http://jsfiddle.net/G6nWh/4/
CSS:
#media (min-width: 1200px) {
.margin-left-10 { margin-left: 10px; }
}
HTML:
<div class="col-lg-6 loginField">
<div class="margin-left-10">
test
</div>
</div>
If you have changed the breakpoints, you'll need to update that min-width, but this is the default min-width for Bootstrap's large columns.
When the screen gets smaller, the rule stops being applied, so it won't affect your smaller screens.
I have a layout as follows:
<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>
I would like the span9 div and the span3 div to both become span12 divs when the user is viewing the page on a tablet or mobile device, and I would like them to become vertically stacked above on another.
Can this be accomplished and if so how? My current solution relies upon a second set of divs which I show on small browser windows and I hide the above divs.
Using Bootstrap 3, this is super easy:
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
At typical desktop resolution (> 992px), the divs will be 9/12 columns & 3/12 columns. On anything smaller, they will be 12/12.
Twitter Bootstrap 3 grids
Using Bootstrap 2.3.2, you can add a media query:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.span9, .span3 {
display: block;
float: none;
width: 100%;
}
}
I have this blue top link here and this top is taking all width size, and that's what I want. So if you resize your window or open it on mobile this blue div is putting margins both sides, twitter bootstrap responsive is doing that. My code is exactly like this answer but tb still putting margins, that's my code:
<!-- this div is inserting blue bg image and wrap all content -->
<div class="background-top">
<div class="container">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
I would use a similar media query to target the top background div as its Bootstrap that seems to be adding the body padding. Give this a go:
#media (max-width: 767px) {
.background-top {
margin-left: -20px;
margin-right: -20px;
}
}