My current website is this https://resillience.in
It is completely responsive below 1440px and works fine
But it looks wierd when viewed at 2560px as shown below
Don't want to change the things also in % to make it responsive at 2560px
How to fix the view at 1440px and have a work around like shown below
If viewed at higher, it adds padding from both sides.
Also adding max-width:1440px in the main html css file, I cannot achieve the desired result
The following code also might not solve
#root {
max-width: 1400px;
margin: 0 auto;
}
Because some of the images are having its css property as
position: fixed;
right: 0;
In general,you can apply this CSS to your #root element:
#root {
max-width: 1400px;
margin: 0 auto;
}
This will limit the overall width at 1400px and center it horizontally when the window is wider than 1400px.
I don't know if there are any details in other pages of your website which would cause a problem in conjunction with those settings (I don't see any at first sight), but this would be an easy, general procedure to get what you are asking for.
add justify-content: flex-end; to right side menu and I had changed some CSS to look beautiful. Please go through this.
.jss6 {
justify-content: flex-end;
}
.jss7, .jss18 {
margin: 0 10px; /* to add space between a tag and dropdown */
}
.active {
border: none;
}
.active::before {
position: absolute;
height: 6px;
width: 100%;
background: #3672c0;
content: '';
left: 0;
bottom: -3px;
}
try do the following:
#root {
width: 100%;
}
#media (min-width: 1440px) {
#root {
width: 1440px;
margin: 0 auto; // for centering
}
}
setting the width to fixed-size might solve the issue, from my quick review, why? cuz u probably used width: 100% inside the root div, so setting the root div to fixed-size always be related to that 100% = 1440px; :) let me know
Related
Here's what happens when unfixed and it's the behaviour I want but I want navbar to be fixed
Here's what happens when fixed: it doesn't move the content (it is behind this dropdown)
// scss for the nav
.filterbar {
position: fixed;
top: 0;
box-shadow: 0 0 15px black;
width: 100%;
// for info section
.filters-info {
margin-top: 110px;
display: flex;
justify-content: space-between;
}
How to fix this? (margin-bottom didn't help). I have two ideas: 1. to get toggleFilterbar prop and to change the styling based on this 2. to make the nav position absolute and then to change it to fixed. However, I guess there must be a simplier css way to fix this
Give position:relative; to .filters-info
and
Replace margin-top: 110px; to top: 110px;
I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you
In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
I've this html setup...
body
.top
.content
top is fixed fullscreen popup with some other content in it. However, while scrolling reaches to an end in the .top>ul the background item starts to scroll. Which is very nauseating and makes site all slowish on tablets.
On tablets, even when i add overflow hidden to body using jquery it doesn't prevents it for some reason from scrolling the background even sometimes when it's not reached end.
I want no scrolling of background page when popup is on top of the page. It's suppose to be a new slide.
What can i do preferable structure wise, then css, and lastly js.
Demo http://jsfiddle.net/techsin/0bv9g31k/
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
overflow: hidden;
}
.cont {
width: 400px;
margin: auto;
}
These functions freeze and unfreeze the body element, while allowing children to scroll if they have the appropriate overflow property:
function freeze() {
var top= window.scrollY;
document.body.style.overflow= 'hidden';
window.onscroll= function() {
window.scroll(0, top);
}
}
function unfreeze() {
document.body.style.overflow= '';
window.onscroll= null;
}
Working Fiddle
I believe you'll find a solution here, particularly the answer by Troy Alford: Prevent scrolling of parent element?
I suspect your question will be flagged as a duplicate.
I would have added this as a comment on your question but I don't have enough reputation points yet. I also don't feel good about trying to pass off any of the answers on that question as my own, so I'll simply answer with that link and hope it helps you.
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: What I've attempted based on first two answers:
I've made the following modifications to the CSS based on parts of the two answers received so far:
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
overflow-y: scroll;
}
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
</style>
What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
Demo: http://jsfiddle.net/vfSM3/
On the footer div use position fixed and bottom 0 like:
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
If you want to use fixed height on the footer, you could do the following
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.