I am having a problem with scrolling on the mobile version (1299px #media defined rule) of the vertical menu on my website. Link is: https://my-digital.ro/wp/
Video explaining problem: https://youtu.be/K9fQJPb6WMI
So basically, my issue is that I am trying to make the whole menu scrollable on mobile. It worked fine when I added overflow: scroll property to the elements, except that it does not work when a sub-menu is expanded. It just gets stuck, as it was overflow: hidden and I can not scroll further.
Actual CSS is:
.clearfix {
display:block;
clear: both;
position: sticky;
}
#media only screen and (max-width: 1299px) {
#content {
position:absolute;
padding-left:0px;
z-index:102
}
#main-nav {
overflow: scroll;
}
.clearfix {
overflow: scroll;
}
header {
position:fixed;
min-height:100%;
height:auto; }
I have tried adding overflow:scroll even to the header elements inside #1299px rule and others too, including ul> li .submenu but nothing works :(.
give some relative height to the main_nav:
#main-nav {
overflow-y: auto;
height: 90vh;
}
where vh is relative to 1% of the height of the viewport.
And please use overflow: auto; instead of overflow: scroll;
Just make these changes in your style.css
#media only screen and (max-width: 1299px)
#main-nav {
overflow-y: auto;
height: 400px;
}
Related
<html>
<body>
<div class="container">
<div class="menu"></div>
<div class="list"></div>
</div>
</body>
</html>
.menu{
float:left;
width:50%;
}
.list{
float:right;
width:50%;
}
how to disable the whole html's scroll. but the menu div and list div can scroll vertically?
and dependently?
I mean when I scroll the left div the right div do not have to scroll together.
You need to start from the html tag down. It and all parents of your scrollable elements should have the height of the viewport.
This means that the html, body, .container and both scrollable elements should have a height: 100% or height: 100vh.
Then you can make the scrollable elements actually scroll independently by adding overflow: hidden.
If this doesn't make sense, please see this pen which I made for you.
You need to prevent vertical scrolling on your .container. This can be done by using the overflow CSS property. Look at the code below on how you can achieve this and also enable vertical scrolling for your two elements (.list and .menu).
body {
margin: 0;
padding: 0;
}
.container {
max-height: 100vh;
height: 100vh;
overflow-y: hidden;
display: flex;
}
.menu {
overflow-y: auto;
width:50%;
}
.list {
overflow-y: auto;
width:50%;
}
I am new at HTML and CSS and I want to make a responsive header that contains:
logo picture with margin-left in pixels when full resolution
pogo picture must have it's full size when full resolution
navigation menu with 6 and width of 1500 when full resolution
No Bootstrap. What are your suggestion to accomplish that? What I have made so far is not responsive, on full size (width:1920px) measures are fine and it looks exactly how it should, but when I try to resize browser it is not in one row, even if I declare that div "inner" that contains them is width:100%, and both of them are also width:100%.
Code is something like this:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class="inner">
<div class="logo-wrapper">
<div class="small-logo">
<img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class="navigation">
<ul><li>......</li></ul>
</div>
</div>
Use media queries.
Here goes my Desktop resolution css
#media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
You'll want something like the following for bullet 1
.small-logo {
margin-left: 10%;
}
#media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
Bullet 2 I'm guessing should say Logo not Pogo. Based on the code provided .small-logo is your only logo so you'd do something like this.
.small-logo{
width: 100%
}
What does the navigation menu have 6 of? Columns? Buttons? Unicorns?
Set the inner class or preferably an id of the largest content div to the max I generally like to center the content and give some side white space so I put the basics in the comments.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Are you trying to have logo-wrapper and navigation horizontally aligned?
display: inline-block;
I have a div with the overflow-y: scroll; property I need to remove this property when user execute the print (Ctrl+P)
<div id="taskList" class="uk-padding-small">
</div>
<style>
#taskList{
overflow-y: scroll;
min-height: 400px;
height: 400px;
}
#media print {
#taskList{
overflow-y: auto;
min-height: auto;
height: auto;
}
}
</style>
This work fine with other properties like width, margin, padding. But I can't overwrite the overflow-y property and my document don't show the full content.
You can try this runnable.
https://jsfiddle.net/atsuya007/j3f6d8ht/
be sure to make the media print at the end of the CSS.
By reversing the logic, it works
.fullheight{
min-height:100%;
height:fit-content;
}
#media screen {
.fullheight{
height:100%;
overflow:auto
}
}
I'm trying to learn designing a website.
Is there any way I can set my whole page width to 1000px with the current responsive sticky footer I have?
If possible, on top of the condition mentioned above, I want the left and right div to be horizontally align and the div will become vertical align when the screen collapse.
Here is my html/css code:
JSFiddle
Add max-width:1000px; to the .wrapper class and make the .content class float:left
.wrapper {
margin: 0;
height: auto;
max-width:1000px; /*add this line*/
}
.content {
background-color: slateblue;
width: 500px;
float:left; /*add this line*/
}
Demo at http://jsfiddle.net/Sp2ZW/
you mean something like this?:
http://jsfiddle.net/S3hMH/1/
html, body {
margin: 0 auto;
display: table;
height: 100%;
width: 100%;
width: 1000px;
}
.content {
background-color: slateblue;
width: 500px;
display: inline-block;
float:left;
}
Fiddle
If you are relatively new to responsive design i suggest using a framework as
Foundation
bootstrap
Coming to your questions.
Ya You can set your page-width to 1000px.
#wrapper{
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
.content{
width: 50%;
float:left;
}
#media screen and (max-width: 480px) {
.content{
width:100%;
}
}
Content will occupy 100% width and stacks horizontally if the screen resolution is less than 480px because of the query above.Using % width helps you when designing responsive web pages
I am trying to prevent the scroll bar from appearing when the div .boxB overflows and I am unsure why my code is not working. In other words, I am trying to remove the horizontal scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then .boxA.
http://imgur.com/yQDFG
The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used overflow-x:hidden but that did not do the trick.
HTML:
<div class="boxA">boxA
<div class="boxB">boxB</div>
</div>
CSS:
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}
May be, overflow-x: hidden; must be uses for .boxA?
You just need to write
overflow: hidden
Try this css:
.boxA {
background: yellow;
width: 800px;
height: 600px;
overflow-x: hidden;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
}
overflow must be on a tag which wraps too large content (in your case - boxA wraps boxB). So, if you do not want something to go outside wrapper - you must put overflow on wrapper
In your HTML code, boxeA is the parent and Box B is the child.
CSS property overflow used like this :
.boxeA
{
overflow: hidden;
}
will prevent a part of the boxeB (which is the child of boxeA) to be displayed when it is more bigger than it's own parent.
boxeA is like a mask on boxeB.
in the url you have given, to prevent the aqua boxe to be entirly displayed, you have to put the aqua boxe as a child of the light blue one,
and give the light blue box a css property like this :
.light_blue
{
overflow: hidden;
}
Now that I understand what you want, here is a possible solution:
http://jsfiddle.net/dy8g5/3/
Parameters:
.boxB must be visible outside of .boxA, with no horizontal scrollbar.
The browser should not have a horizontal scrollbar, if the browser width is smaller than the width of .boxB
The solution was to use a media query to hide the horizontal scrollbar, IF the browser width is smaller than the width of .boxB
#media all and (max-width: 1001px) {
body {
overflow-x: hidden;
}
}
#media all and (max-width: 801px) {
body {
overflow-x: visible;
}
}
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}