Panel position changes when enlarging browser window - html

The situation i'm facing :
i have an asp.net with a header, sidebar and another right sidebar. the thing is when i execute my website in browser and mimimize browser window. the sidebar on the left jumps on the content page and controls get all mixed. see picture for an idea.
Another problem is when i executed that website in a wider screen resolution the controls ( panels ) had a bigger margin and evertyhing look wider.
Any ideas how to fix this ?
Thank you in advance
EDIT:
Sidepanel ( right ) CSS code:
#droite
{
position: fixed;
top: 22.5em;
right: 5%;
width: 13%;
background-color: White;
}

What I did on my website (firedrake969.github.io) was add some simple jQuery code to hide the sidebar whenever the window became too small. If you don't mind using jQuery, I'd say that's the way to go. However, if you don't want to use jQuery, I don't think position:fixed can have the bar hide just with CSS/HTML if the browser window gets too small.

You probably need something similar to this. the max-width can be set to any screen width you choose.
#media screen and (max-width:768px) {
#droite
{
position: fixed;
top: 22.5em;
left:5%;
width: 100%;
background-color: White;
}
}

Related

Nav bar height isn't properly mobile responsive

What I'm Trying To Do (including JSBin)
My nav bar works fine on a desktop: when you click on an item, it scans to that section of the page, beginning with the header. However, when I resize to mobile, the spacing is off. When you click on "Section 2" on the navbar, you should see "Section 2" pop up directly below the navbar.
See example on JSBin.(Use Developer tools to show on mobile to see the problem when clicking around the nav bar).
What I've Tried/What I Think The Problem Is
I'm pretty sure it has to do with this:
.anchor:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Which I got from this Github page, but I can't figure out how to automatically change the 75px number depending on the screen size. I read this question/answer but still can't figure out how to change the CSS in my case.
It looks like that page is for Bootstrap. What you're looking for is built directly into CSS!
Check out this page.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Essentially what's happening to you is that, once your page is scaled down to a mobile device. It causes your buttons (the text elements) to stack, causing your nav to be vertically larger than it should be!
To answer your code question try something like this:
.anchor:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
#media only screen and (max-width: 480px) {
.anchor:before {
height: 65px;
}
}
What happens is that once your screen width goes unter 480px (this value can be tweaked to whatever you need it to be) it will run the height: 65px; and override the height style from the one above it.
Another way you can prevent your nav bar from resizing when you don't want it to is by setting overflow: hidden; and then specifically defining what you want the height to be. (Personally I like to use height: 47px;. It feels like a perfect size to me)
That should answer your question. However, what you should really do is look into compiling all of your nav buttons into a dropdown menu once your screen shrinks to be small enough.
If you're feeling up to it, check out this page:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Full-height sidebar

I have the following page with sidebar: https://www.slagerijrudi.be/product/broodje-ham/
I was wondering if there is a simple way to make my sidebar have the same height of the content next to the sidebar. So the sidebar should stretch from header to footer, instead of stopping halfway the page.
In order to allow the aside (or sidebar) to reach its full height, you can make it have an absolute position. Do remember though to turn it off for smaller screen sizes (where you'd want to collapse the sidebar). The best design practice at the moment is to declare specific behaviour for larger screens: #media screen and (min-size:667px) { .. your code for big screens here .. }
Add the following to solve the issue:
.wf-wrap {
position: relative;
}
.sidebar {
position: absolute;
left: 0;
height: 100%;
}
Edit: as a comment on the question put it, a flexbox is a neater solution, but not a 'quick fix'.

How to push other elements to the right using my sidebar?

I want to create a simple side-navigation that takes up the entire screen's height. I am using Milligram for my base, and I want my side-nav to work with it. I have the following set up:
Codepen demo
As you can see, my sidebar is the following element
<div class="sidebar"></div> with the following styles:
div.sidebar {
position: absolute;
width: 250px;
height: 100%;
z-index: 99;
background-color: black;
}
This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.
How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.
Any help is appreciated.
You can set the left margin on your equal to the width of your sidebar.
section .container {
margin-left: 250px;
}

conflict between positon:fixed and overflow:visible property in css

Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you

Incorrect scrolling after vertical centering

So I have a problem, after setting position: absolute; top: 50%; margin-top: -310px for my main content. The problem is when I minimalize the browser window and the vertical scroll appears, top part of the layout is hidden.
Here is what I mean: http://jsfiddle.net/95Uzt/15/. You can see the menu and contact form but the header above the form is not visible/covered by the browser. What is wrong?
I think you're trying to handle two cases with one piece of code, and that's just not working. You're going to need to use some kind of conditional code to handle the two cases.
Your two cases are:
For a viewport more than 620 pixels, you need to center the content
For a viewport less than 620 pixels, you need the content top aligned.
For more modern browsers that support it, you could look into using CSS:
#media screen and (max-height: 620px) {
.content
{
top: 0px;
margin-top: 0px;
}
}
If you need more extensive browser support, you'll need to use javascript, I think.