I am trying yo move neweyes class using push and pull on mobile screen but I am unable to do that. How can I move upside this on mobile screen?
<div>
<div class="woke-eye col-sm-12 col-md-4 col-sm-push-12">
<img id="dani1">
</div>
<div class="neweyese col-sm-12 col-md-8 col-sm-pull-12">
<img src=''/>
</div>
EDIT working fiddle
JSfiddle the wokeup eyes div should come later on mobile. now code is doing reverse , on large screen its coming later . but I need on mobile
Here's an example using your code, but modified so that it works the way you want.
<div>
<div class="neweyese col-md-4 col-md-push-8">
<img src=''/>neweyese
</div>
<div class="woke-eye col-md-8 col-md-pull-4">
<img id="dani1">woke-eye
</div>
</div>
You don't need col-sm-12, because that is the default behavior if you don't include it. Otherwise, we're essentially reversing the position of the two columns on MD and up. If the viewport is below MD, then the columns will switch to a width of 12 but since they are reversed the one on the right will be on top.
https://jsfiddle.net/6rtwyazq/12/
If I understand what you want:
You want on desktop .woke-eye to be on left side and .neweyese on right, on small screen you want .woke-eye to be below .neweyese, If so here is an updated JSfiddle, hope this helps.
Update
Check the updated JSfiddle.
Second Update
Reffering to your last comment, this is what you are looking for JSfiddle.
The following code worked for me.
#media only screen and (max-width: 767px) {
.xs-column-reverse {
display: flex;
flex-direction: column-reverse;
}
}
Related
So I have the following desktop layout (which I am completely satisfied with):
This is my attempt to make it mobile:
I like the horizontal scroll here, but I feel that the cards are too thin; I would like to stretch my card to be more box-like (square). Ideally, the card is big enough to fill the gap between the header and the footer without causing
HTML:
<div class="page-content">
<div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">
<md-card style="width:10rem;" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
class="page-card mat-card">
<img md-card-image="" src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
<md-card-subtitle class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
</md-card>
</div>
</div>
I've tried many css tricks and tried using flexbox, but there must be something I'm missing (media queries perhaps, and how to override them).
How can I make the following styles apply ONLY to mobile?
min-height: 375px;min-width: 278px;
If anyone has any direction on how to accomplish this design, it would be greatly appreciated.
In order to get a different style for mobile, we do this:
#media (max-width: 600px) {
md-card {
min-width:17rem;
}
}
Here is my site - http://soundboycrew.co.uk/
When I reduce the screen size the sticky header doesn't optimise well at all. The header takes up the whole screen.
I'm using Wordpress and a theme called Lane (Which I think is made using Bootstrap). The demos show good optimisation, but I believe something is messed up.
Is there any way I can add some custom css to resolve this issue?
Any help will be much appreciated.
I think the problem are fixed sizes. If you want it to be responsible use ems in opposite to px. The same applies to property 'right' in media queries which positioning collapsed navigation.
To place elements horizontally change size of bootstrap columns. For example:
<div id="logo" class="navbar-header col-md-2 col-sm-3 col-xs-12"></div>
<div class="email_phone col-md-5 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-sm-3 col-xs-12"></div>
and in
#media only screen and (max-width: 991px)
.responsive #logo {}
delete
margin-left: 15px;
I have a page, when i am looking this page on a laptop screen the two divs are rendering properly but when i am looking this page on mobile screen these two divs are overlapping above each other. I want to remove this overlapping of these divs and want to read first div then second div.
How to do that ?
#media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay,
.vc_row-fluid.darker-overlay{
display:inline-block; /* Change this to inline-block instead of block */
}
}
but this is creating issue for header,solve that accordingly
check out with Bootstrap. it provides with responsive CSS. you have to include the div class that you require.
example: if you have two divs, put them into one main div and then call each div with separate div class. like
<div class="col-sm-12">
<div class="col-sm-6">
// your code for first div
</div>
<div class="col-sm-6">
//your code for second div
</div>
</div>
try like this. it may help you.
I hope i understand your question because its not really clear(No code provided)
But what i think you need to do is the following:
<!-- Probably your html part -->
<div class = "wrapper">
<div class = "container">
<!-- Some content-->
</div>
<div class = "container">
<!-- Some content-->
</div>
</div>
Here comes the css magic.....
.wrapper{
display:block;
}
.container{
display: inline-block;
}
#media only screen and (max-width:768px){
.container{
width:100%;
}
}
#media only screen and (min-width:768px){
.container{
width:50%;
}
}
By using media querys you can easily fix this kind of stuff
You added as a comment to your question that a demo URL was http://voyagecontrol.com/canarywharf
Origin of the problem: #venue_draft has inline styles including height: 900px.
Solution: it should be removed (elements should adapt automatically to more or less content. Not fixing height is a good start for that) or, if other problems occur, replaced by min-height: 900px
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 am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:
So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.
Is that even possible? Also there should be some space between blocks, so background image should fill those space.
Please help me out.
What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.
Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.
#media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}
I think the most efficient way to do this is to simply use a single row with three columns. Your divs can stack inside the appropriate columns, and you can define the heights for each one. You can see it in action here: http://jsfiddle.net/StSmith/Z9SpM/1/
<div class="container">
<div class="row">
<div class="col-lg-6">
<div id="box1">1</div>
</div>
<div class="col-lg-3">
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="col-lg-3">
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
A simple way to do this is to declare the divs in the order you listed, and then apply a simple float: left. If you define the heights of each div manually it should all fit into place!
Rachel's got the right idea. You really just need to nest rows into a container, then use CSS to adjust the heights.