I'm finishing up work on this website and trying to finalize the positioning of the slider navigation; however, I'm struggling to get the position correct on approximately tablet width screens (550px-768px).
I think something is off with my media queries and sizing but I can't put my finger on why I can't lock the position down between that range!
Here's a link to the correct behavior. Any ideas?
Slider uses Cycle2, if it matters!
Sample HTML
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
<div id="sliderNav">
<div id="adv-custom-pager">
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
And CSS
#media screen and (max-width: 768px) and (min-width: 550px) {
#sliderNav {
bottom:145px;
}
.slidercaption {
height:250px;
}
}
I can't see anything wrong with the slider at that point.
To be honest when I add a slider to a website, I usually turn it off for mobiles and have just 1 image visible (to break the text up). The viewpoint is so small, people won't wait to watch for the slider to change unlike desktops when they could be reading something else and notice it change.
Related
This is currently what I have in my HTML code:
I have 3 of the "col-md-4" div's in the row, along with container--wrap in each of those, so that it fills the webpage with 3 equally sized containers. (div row is inside another div with class = container-fluid). When I adjust the window, the containers will stack on top of each other, but only after I make it much smaller (like 2/3). Also, on mobile, it does not stack at all and the containers are all really small. How can I make it so that these containers are able to stack (flex?) easier, and have them stack on mobile automatically? I also have a navbar that looks fine on mobile, but it remains small on mobile, just collapsed. How can I make it larger on mobile? Here is the navbar code:
cov19.cc (website) is an example of what I would like my site to do. The navbar is enlarged on mobile, and the container are stacked on top of each other rather than side by side. Thanks
For the First Problem, use display:flex for the row.I have also used media query so that when the user is on mobile screen or the size of screen is less than 991px, the containers will be on the top of each other.Please run it full screen and shrink the browser window to see the effect.
#media all and (max-width:991px){
.row{
flex-direction:column;
}
.container--wrap{
width:98vw!important;
}
}
.row{
display:flex;
}
.container--wrap{
width:33vw;
text-align:center;
border:1px solid;
transition:all 0.3s;
}
<div class="row">
<div class="col-md-4">
<div class="container--wrap">
This is one
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is two
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is three
</div>
</div>
</div>
While developing a web page it would be handy to see which sets of size classes are active: xs, sm, md, lg.
I've noted that there are some extensions that show the grid overlay, but not the size.
Is there a way to indicate which size sets are active?
With bootstrap 4.1 you can add something like this on your page.
The code below will show what is the current class used by bootstrap based on your screen width.
<div class="alert alert-info">
<div class="d-none d-xl-block font-weight-bold">X-LARGE (XL)</div>
<div class="d-none d-lg-block d-xl-none font-weight-bold">LARGE (LG)</div>
<div class="d-none d-md-block d-lg-none font-weight-bold">MEDIUM (M)</div>
<div class="d-none d-sm-block d-md-none font-weight-bold">SMALL (SM)</div>
<div class="d-block d-sm-none alert font-weight-bold">X-SMALL (Defaut)</div>
</div>
Bootstrap grid system has 4 classes
xs for mobile (Below 768px)
sm for tablets (Above 768 and Below 992)
md for desktops (Above 992 and Below 1200)
lg for larger desktops (Above 1200)
So, with this values. You can change the width and understand the class currently active now.
There is javascript solution :
Responsive Bootstrap Toolkit
If you want to detect current size set with css, you can create a css rule for body or any other element like:
#media only screen and (min-width: 1280px) {
.body-helper {background: green;}
}
#media only screen and (min-width: 992px) and (max-width: 1279px) {
.body-helper {background: pink;}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
.body-helper {background: maroon;}
}
#media only screen and (max-width: 767px) {
.body-helper {background: lightblue;}
}
Please use appropriate breakpoints of your bootstrap settings. So you can identify current size set with background change.
You can check your screen sizes or media queries break points through Developer Tools like on Google Chrome. You can check "Test Responsive and Device-specific Viewports" from Google Chromes Developer Tools.
you don't need any extention if you are using developer tools of chrome.
Just open Chrome developer tools by pressing F12
Resize window
You will see size of window at top-right corner.
Select Div in developer window for which you want to check which class is Active.
Resize window again.
you will see active class name will be visible in Styles pane of developer tools.
You could work with hidden columns. So you hidde a div in other screen-sizes.
Example:
<div class="col-lg-3"> <div class="visible-lg hidden-xs hidden-sm hidden-md">col-lg</div> </div>
Learn more: Scotch.io - Responsive Utilities
I used a method that might be silly, but it works great.
You can do something like this, which will show the size on screen, but since the size is 0 then it's going to hide it. (don't use visibility hidden 'cause it doesn't work)
<span id="theSize" style="font-size: 0;">
<span class="d-none d-lg-block">LG</span>
<span class="d-none d-md-block d-lg-none">MD</span>
<!-- and the rest of the sizes -->
</span>
and this is the code for checking the size in javascript.
if (document.getElementById('theSize').innerText == 'LG') //large
// do something
else if (document.getElementById('theSize').innerText == 'MD') //medium
// do another thing.
// for the rest of the sizes
else if ...
else if ...
else ...
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 trying to share the navbar across all devices, but I want it to format differently on small screens than on large. I am new to Bootstrap so this might be obvious, but I am having trouble getting the menu right with a single set of code and not trying to do it with different rows and col-* settings.
Bootply Sample
I want two things actually. I would like the win and loss to be on the same line (which is close without the navbar-right) except they are not even in vertical position.
EDIT: I am able to correct this when removing navbar-right etc..., but do not get the navbar-right when the menu is condensed.
Secondly, I wanted the navbar-right, so when on a small display, all the badges align on the right hand side of the menu.
Is there a way to keep the menu smaller as well, so on a tablet it is not the whole width of the screen while on a phone it might be?
When the navbar normally draws, I want the badges beside the labels to keep the menu items smaller/closer together. Only on the pull down menu do I want them to go to the right.
Do I need to create two copies of the navigation to achieve this?
First, the badges seem aligned to me if you remove those navbar-right classes. If you are using that class just to float them right, you should be using pull-right but in this case there's no need.
Second, if you wrap your badges inside another span, then you can use media queries to float the container right on mobile devices.
<span class="badges">
<span class="badge alert-success">Win: 3</span>
<span class="badge alert-danger">Loss: 1</span>
</span>
/* Note that you can use Bootstrap's '#screen-sm-min' variable if using LESS.*/
#media (max-width: 767px) {
.badges {
float: right;
}
}
If you want your navbar to be full width on mobile but not any other device, you could try something like this:
#media (min-width: 768px) {
.navbar {
width: 80%;
margin: 0 auto;
}
}
Demo
Edit
For the changing width you can use Bootstrap's col-*-* classes like this:
<div class="wrap">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...
</div>
</div>
</div>
That means for mobile it'll be full width, but anything from portrait tablet upwards will take up 10 of the 12 grid.
Demo
I've recently began using Bootstrap and have not had any problems doing so except for this one issue I've run into. I've set up my own personal website using it and styled it to be responsive and so far it looks great on everything.
But the problem I am having is that from 980px - 1200px, Bootstrap renders the page in full-page rows (exactly as it does as if it were on mobile). I'm using bootstrap-responsive.min My page set up is:
<div class="row-fluid">
<div class="span3"> <!-- sidebar here --> </div>
<div class="span8"> <!-- content of each page --> </div>
<div class="span1"> <!-- empty for spacing --> </div>
</div>
980px-1200px is the only interval for which it renders correctly, and I so far have no media queries for that interval. Has anyone run in to this problem before? Or does anyone know what might be causing this?
A page example can be seen here (you will notice if you slowly resize the browser window):
http://portfolio.jrstrauss.net/work/
You have a media query targeting screen widths up to 979px,
#media (max-width: 979px) and (min-width: 768px)
And the next one is targeting screen widths of 1200px and up
#media (min-width: 1200px)
anything in-between 980px and 1200px will be using the default styles. You can fix this by changing the 2nd media query to have a min-width: 980px instead of 1200px.
[edit] It's something completely different: You need to rewrite/fix your HTML, e.g. you can apply .span3 to the header element, so it floats as intended. The same goes for your second block.
<header class="row-fluid" style="display: inline-block;">
<nav class="main span3">
…
</nav>
</header>
You basically did set the correct classes, but then added full-width block elements inside.