i would like act a div as overlay sidebar only on mobile device. Other than mobile device it should act as normal div.
Sample Code:
<div class="row">
<div class="col-lg-3" id="sidebar">
overlay sidebar only on mobile device
</div>
<div class="col-lg-9 col-12">
</div>
</div>
how do i make id="sidebar" act as normal div and sidebar on mobile device.
you can achieve using media query
#media screen and (max-width:767px){ //targets the mobile devices
#sidebar{
/*css code goes here*/
}
}
The best way would be to use jquery to collapse its width when the size for mobile screens has been attained
You should use d-block or d-none property like this:
d-sm-none or d-sm-block
Related
Regarding Bootstrap 4:
i was trying to collapse .card div on mobile view only.
i tried .collapse class but in this way it collapses on all sizes of screen. here are my codes in case if somebody wants to see;
<div class="col-lg-3">
<div class="card>
<div class="card-header">
<a data-toggle="collapse" data-target="#t10"><h3>Top 10</h3></a>
</div>
<div class="card-body collapse" id="t10">
<div class="row ">
<div class="col-md-12>
<h4>ABC</h4>
<h5>Review: <img src="../../images/4stars.png"><br></h5>
</div>
</div>
</div>
</div>
after spending hours searching on internet, i didn't find anything probably i was using wrong search terms (as newbie), I got an idea to reverse the situation so I un-collapsed for =>992px in media query, codes as following:
#media (min-width: 992px) {
#t10.collapse { display: block; }
}
As you can see it is OK but I really want to learn the best way to collapse a div/card when screen size changes to less than 992px.
(Pardon my English. I am not Eng speaker).
Just add .dont-collapse-sm class to Your collapsible div to not disappear over 768px breakpoint.
Credits for: https://codepen.io/glebkema/pen/xryaKK (also helped me a lot!)
#media (min-width: 768px) {
.collapse.dont-collapse-sm {
display: block;
height: auto !important;
visibility: visible;
}
}
Use the responsive display classes.
For example,
<div class="card-body d-none d-lg-flex" id="t10"></div>
Will hide this DIV on screen widths less that 992px.
Bootstrap 4 providing classes for responsive screen. like col-lg-* col-sm-*
So, You can try changing the display by using the bootstrap class itself.
E.g.
<div class="d-block d-sm-block d-md-flex d-lg-flex d-xl-flex">
/** your content **/
</div>
This classes will change the display property for every screens which we mentioned.
For your reference, Check the Bootstrap 4 Docs: Here
I'm using an iPhone CSS device from https://marvelapp.github.io/devices.css/
However, I can't find an intelligent way to make it resize to fit within mobile devices. The only way I've found is by changing the meta viewport's initial scale, but that changes how the entire Bootstrap website appears on mobile, not just the mobile device obviously.
Is there a way to perhaps change the scale for the specific div within which the CSS mockup resides, or another way to make the device resize for mobile view?
A transform: scale() seems to work.
The scale could be set using JS based on the viewport width to make it fit the screen.
.small {
transform: scale(0.5);
}
<link href="//marvelapp.github.io/devices.css/assets/devices.min.css" rel="stylesheet"/>
<div class="marvel-device iphone6 silver">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<!-- Content goes here -->
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
<div class="marvel-device iphone6 silver small">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<!-- Content goes here -->
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
You must to do it manually using "medias" to determine how it should look in certain devices. Media Queries are useful to make breakpoints on viewport sizes to adjust content and view it properly on different screen resolutions.
The following example shows how a media query changes some existing values de .marvel-device.iphone6 and .marvel-device.iphone6 .sensor at a resolution of 320px wide.
#media only screen and (max-width : 320px) {
.marvel-device.iphone6{
width: 320px; /*Or the new width you want in pixels*/
height: 480px; /*Or the new height you want in pixels*/
}
.marvel-device.iphone6 .sensor{
left: 50px; /*Or the left position for the sensor*/
}
}
As I said before, I don't know an other better way to do it but manually, so you need to copy that code, and modify these values to fit the screen resolutions you want. Unless you could use transform for the whole .marvel-device
I am using bootstrap for my images. It displays the smaller image in the browser as I am using visible-xs with img-responsive.
However when I am trying to load the bigger image using media query, the screen is just blank.
I have checked the location of the image and it is there.
Could someone please point me in the right direction as to why bigger image is not being displayed with media query?
<div class="container">
<div id="my_img"><img id="pic" src="images/flower.jpg" class="img-responsive visible-xs"></div>
</div>
and in the CSS file
#media (min-width: 1200px) {
#pic{
background:url('images/flower-1200.jpg') no-repeat;
}
}
if you are using the visible-xs class then according to Bootstrap Docs, it only going to appear in extra-small screens, hiding in the rest of the screens.
If you are trying to load a new image (using the background) then you have to apply to the parent #my_img since it doesn't have the visible-xs class.
#media (min-width: 1200px) {
#my_img {
background: url('//lorempixel.com/1600/900') no-repeat;
height:900px;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div id="my_img">
<img id="pic" src="//dummyimage.com/100x100" class="img-responsive visible-xs">
</div>
</div>
</div>
</div>
As dippas mentioned, your #pic image will not be visible at 1200px because of the visible-xs class so you would need to set the background image of your #my_img instead. Be sure to provide the appropriate dimensions in your CSS of the image in question.
I would say that your .css files are most likely in a css folder.
If that is the case, you need to use the relative location of the image based off the location of your .css file. most likely this:
background:url('../images/flower-1200.jpg') no-repeat;
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;
}
}
As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?
Disregard the blue box.
This is what I have so far:
<div class="container">
<div class="col-xs-12 col-md-7 view">
<div id="panelviewer">
<div class="row">
<div class="col-xs-12 col-md-6 panel1">one</div>
<div class="col-xs-12 col-md-6 panel2">two</div>
</div>
</div>
</div>
</div>
Jsfiddle
There are other ways to keep the divs side by side and achieve what you need:
#panelviewer .row {white-space:nowrap;}
.panel1 {display:inline-block;float:none;background:#aaa;}
.panel2 {display:inline-block;float:none;background:#eee;}
Demo http://jsfiddle.net/7HcQ8/3/
No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:
#media (max-width: 768px) {
.sizeSmaller {
height:50%;
width:50%;
}
}
Adjust the width of the media query to suit your neds.