I am super new to Bootstrap so please forgive me if I am just not getting it.
This is more of a design decision question than a technical question but I noticed in the bootstrap dashboard examples Bootstrap 4 dashboard example on a small device there is no way to navigate through the application as the left menu completely collapses and there is no + to expand the navbar. On the 3.3 version here: Bootstrap 3.3 dashboard example when the device is very small there is at least a + that allows you to expand the top navbar but still all of the options on the vertical menu on the left are completely lost.
Without the menu on the left it seems to me that the application would be unusable. Am I missing something?
Default sidebar display in Bootstrap example is hidden display: none;
And for screen width > 768 px #media (min-width: 768px) {} they show this block.
You can do it yourself..
Here is original Bootstrap code:
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
Related
I'm having a problem with the mobile version of a responsive website I'm building.
See that green "info" DIV that appears at the top left corner of the full-screen version of the site?
I need it to move down and live at the bottom of the screen - right above the footer DIV that has all the links - on the mobile version of the site.
Here's the full-screen version:
Here's the Mobile version:
Here's my CSS for the regular full-screen layout:
#productHoverDIV {
z-index: 20;
position: absolute;
top: 10px;
left: 10px;
width: 300px;
padding: 8px;
}
And here's the mobile rule:
#media screen and (max-width: 414px) {
#productHoverDIV {
z-index: 20;
position: absolute;
bottom: 40px; // that's the height of the FOOTER DIV below it
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
The issue is that even though I'm telling the productHoverDIV to be 40px from the bottom on the mobile layout, it still keeps it's top:10px value from the regular CSS rule, and ends up covering almost the entire screen.
So I need to somehow cancel-out the top rule - or override it with a different value, except
I have no idea know what value to put from the top cause every mobile device has a different height.
How do I resolve this?
You should change it back to its default value, which is auto.
Removed the duplicated z-index and position values.
#media screen and (max-width: 414px) {
#productHoverDIV {
top: auto;
bottom: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
I am trying to make Advance search bar. I am using this template https://bootsnipp.com/snippets/2q81r.Everything is working fine only problem is, Search bar and dropdown menu is not full width 100%.I want dropdown menu cover full width of search bar and must be responsible.
In this template width of search bar and dropdown is fixed in pixel.
Only delete or comment the width property
#media screen and (min-width: 768px) {
#adv-search {
/* width: 500px; */
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
/* min-width: 500px; */
}
}
Instead of having something like:
searchbar{width: 500px}
Try using max-with to make it responsive:
searchbar{max-width:100%}
For the dropdown menu add:
.dropdown.dropdown-lg .dropdown-menu {
width: 100%;
//rest of code}
Hi I have looked at several stackoverflow questions on how to remove white space from a webpage (see selection below) but noone of the solutions given had any difference for me. The werid thing is that the whitespace only shows up when I look at my site on my mobile. The site in question is: http://moduleplanner.github.io/ and its corresponding github repo is: https://github.com/Moduleplanner/Moduleplanner.github.io
Thanks for the help. :)
Huge White Space At Bottom Of Page
Eliminating white space at bottom of page
CSS White Space At Bottom of Page
Strange space at bottom of page on iOS
current state of whitespace
It's your CSS on the .degree element, specifically the absolute positioning. For mobile, change the css to the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
left: 0;
right: 0;
}
}
Or, even better, the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
}
Update
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
.div.degree div.course{
width: auto;
max-width: 100%;
}
}
I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .
I have a div box with an absolute position fixed to the left side of a page. It looks great on PC's and is doing its job of being unobtrusive to the user. However, when the page is loaded from a mobile device, the left side of the screen is no longer way off to the side, it is on the edge of the content so this absolute box now covers a little bit of the content on the left. My goal is to only show this one specific div box to PC's, while preventing it from loading on mobile devices.
CSS:
.harry {
float: left;
padding: 5px 0 0 0;
margin: 0;
position: absolute;
left: 0px;
top: 100px;
z-index: 999999;
}
HTML
<div class="harry">
<big><p><img src="images/side-harry.png" height=200 /> </p></big>
</div>
One way is to just set a CSS3 media query, and hide that div when a mobile device is detected:
#media screen and (max-device-width: 480px) {
.harry {
display: none;
}
}