On the site there is an off canvas nav built into the responsive design, but for some reason between the breakpoints of 600px and 830px the off canvas nav slides but it is completely white. It should display exactly the same as it does below 600px wide. Most likely it is something in the CSS. Anyone have any thoughts?
In the CSS on line 1412 it changes .site overflow to hidden, which then hides the menu. It's under the media call for min-width: 600:
#media screen and (min-width: 600px) {
...
.site {
margin: 0 auto;
max-width: 1024px;
max-width: 73.14285714rem;
overflow: hidden;
}
Just remove overflow:hidden;
You may want to double check that nothing else breaks by changing this line, and maybe reapply it for the wider screens.
Related
I am having trouble developing a website using Bootstrap. I am currently trying to have a margin on the side, when the screen or viewport is too big. But when I finally got it, it broke the responsiveness of the page.
The whole body is inside this div to create the margins:
div style="width:1300px; margin:auto;"
Add this media query to your CSS and make sure it's referenced after any other CSS:
#media screen and (min-width: 1300px) {
body {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
}
How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}
I've set up a media query that should center an image when the screen is smaller than 600px. When bigger then 600px, the image correctly displays to the right of the site title. Chrome inspector assures me that the queries are working, but I think there might be an overarching rule that's keeping my margin: auto from applying. The 'globes' image in question is at the top of:
http://livinginbetween.org/temp/
I'd love any suggestions. Thanks in advance for your time.
Add display: block; to your media query to center the image.
#media only screen and (max-width: 599px) and (min-width: 0px) {
.globes {
display: block;
width: 159px;
margin: 0 auto 0 auto;
}
}
I have these CSS rules for my header
margin: 0 auto;
max-width: 1250px;
Having those (in comparison to not having them) causes the vertical scroll bar to appear when the browser window is < 1250px.
What CSS should I have to let users with big screens see the header att 1250px width, and the others with smaller width see the responsive header at their respective browser window size - without having the vertical scrollbar to appear?
Something like this should work:
#header {
width: 100%;
}
#media screen and (max-width: 1250px) {
#header {
width: 1250px;
}
}
When you smallen your browser to 1000px width then there is a horizontal scrollbar, is there any way to remove this above 1000px? Check my screendump below.
I have tried a clearfix but this didn't help and tried overflow:visible;
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Any clean easy way to fix this with css?
#media all and (min-width: 1000px) {
body {
margin:0;
}
.wrapper {
overflow-x: hidden;
}
}
If browser is more then 1000px wide there won't be horizontal scroll.
The only thing that you can do (which still keeps your site accesible), is set the width on which the scrollbar should appear.
You can fix that by setting a minimum width for the body.
Add this to your stylesheet:
body { min-width: 1200px; }
When the browser is resized smaller than 1200px, the scrollbar will appear.
Use the overflow-x property to hide the horizontal scroll bar on div that creates the horizontal scrolling.
For Instance,
Overflow-x:hidden;
EDIT
If you want 1000px where the scroll should not come and it still comes in 1020, the case is that you have a padding/margin applied somewhere that is taking those extra pixels. You need to remove it to get your thing working.
I have decided when my browser is smaller than 1200px, the overflow:hidden; on carousel which is 1000px wide can be used.
Vladislav Stanic pointed me to the right direction, thanks all.
#media all and (max-width: 1200px) {
.carousel {
overflow-x: hidden;
}
}