I am trying to make my website responsive with mobile phones but for some reason when the screen gets small enough there is whitespace on the right side of the phone in which the html page is not the full width, ive tried adding css which include :
html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-width: fit-content;
position: absolute;
}
but currently the page looks like this:
https://i.stack.imgur.com/Axz5O.png
any idea how to fix this?
It's hard to tell without knowing all child elements.
You can try adding an outline to all tags like
* {
outline: 1px solid green;
}
and check which element is overflowing
Related
Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?
Thanks!
My website: fanismahmalat.com
It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.
I added the following into CSS in the Chrome inspector and it fixed the issue:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.
The problem is in the image of the laptop that is exceeding in width.
https://i.stack.imgur.com/zlg6R.png
I'm trying to create a 100px gap between a textarea that autoresizes using this js library autosize and the very bottom of the screen.
The demo from the link showcases this problem. Once you hit the bottom of the screen there is no space between the text and the window.
Cant seem to find any solutions and margins and paddings dont seem to fix this. Any help appreciated thanks.
An important note is that, in order to work, the script below needs flow-content after the <textarea> element worth of 100px in height. If it doesn't have it, it can't scroll there, so it doesn't work. I provided this scroll-space by setting a padding-bottom:100px on <body> but if you have enough content after your <textarea> to provide the 100px of scroll space, that padding is not necessary. Actually, all of the CSS is there mostly to demonstrate the principle, you shouldn't add it to your project.
The solution is provided by the javascript part.
Another note would be that this is not a fully-working-fit-all-copy-paste-ultimate-solution, but rather a delicate-proof-of-concept. It's up to you to understand what it does and alter it so it works for your specific case. If you have any trouble applying it, just ask/provide details.
And, as a final note, I only added jQuery to it after trying to get scrollTo animated in vanilla without much success. In the end I didn't want to lose more time so just used jQuery.animate(). If you don't need to smooth-scroll to position or if you know how to do it in vanilla, jQuery should be removed altogether (as autosizer is stand-alone too). So, if you need/want it, I could provide a jQuery free non-animated solution.
Here it is:
autosize(document.querySelectorAll('textarea'));
$('textarea').each(function(){
autosize(this);
}).on('autosize:resized', function(){
let fromBottom = $(window).height() - this.clientHeight;
if (fromBottom < 102) {
$('html, body').stop().animate({
scrollTop:(102 - fromBottom) + 'px'
}, 210);
}
});
textarea {
width: 80%;
margin-left: 10%;
}
body {
padding-bottom: 100px;
margin: 0;
min-height: 100vh;
box-sizing: border-box;
}
body::before {
left: 0;
width: 100%;
position: fixed;
bottom: 100px;
content: '';
display: block;
border-bottom: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
<textarea>test textarea</textarea>
I am running into an issue when printing module content, and this happens to all browsers. When I print the modal content, it only previews the first page and anything after the first page would get cut off. I have tried debugging in Chrome print emulator but still cannot figure out a solution.
At some point, I added a scrollbar to the print emulator and I can scroll down to see all the content, but when I print preview, it shows the scrollbar and still cuts off any content after the first page. I don't know why print preview behaves so differently from the emulator.
The project is in react, plain modal that doesn't use any third-party library like bootstrap modal.
Media query for print:
#media print {
body, html {
height: 100%;
overflow: visible !important;
}
.account-header {
display: none;
}
.list-wrap {
height: 100%;
// overflow: scroll !important;
}
.account-content {
margin: 0;
padding: 0;
border: 2px solid red;
position: absolute !important;
overflow: visible !important;
visibility: visible !important;
display:block;
}
.account {
background-color: none !important;
display: inline-block;
font-size: 12px;
border: 1px solid blue;
}
}
Note: .list-wrap is a class applying to the parent container for .account-content. Using the overflow: scroll style would add a scrollbar to the print emulator and I would be able to see all the modal content there. But in the actual print preview, it still shows the first page only.
The problem, when printing, is that you have to set the page size property. The rules that give you the issues you are describing are the ones related to height.
Depending on how you would like to print pages and how you want to handle page breaks, you have to act as described in the following documentation:
https://www.w3.org/TR/WD-css2/page.html
The sections you should check are, at least:
https://www.w3.org/TR/WD-css2/page.html#page-size-prop
https://www.w3.org/TR/WD-css2/page.html#page-breaks
Another article that can help you is this one:
https://www.jegsworks.com/lessons/web-2/html/step-mediaprint.htm
If you want be make sure to have a more wide as possible compatibility with browsers, this GitHub repository may help you:
https://github.com/cognitom/paper-css
I am having several issues getting bxslider to work the way I am wanting. First and most importantly, it does not load unless I bring up the developers tools. I have no idea why this is the case.
I have all three of the js files on my page
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
As well as the css page for bxslider.
My second issue is I can't figure out the DOM to get this style the way I am wanting. All I want to be able to do is controls the margins/padding between images and the top and bottom margins for this slider, to enable me to control the space around it.
I'm not sure what I am doing wrong:
.slider4 {
padding: 100px auto;
border: none;
}
.bx-wrapper {
width: 100%;
border: none;
}
.bx-viewport {
width: 85%;
border: none;
}
.slide {
margin: 0 100px;
}
I don't know if this is possible and I already tried searching for a solution, however no luck at all.
I am trying a full page loading screen with an animated gif (loader-bar.gif), while the background is slightly transparent (or blurred). I guess this would be possible with jQuery, but I really do not understand how to achieve this?
I already tried several things myself, but always results in the same or similar problem; or the animated gif does not show animated while the page is loading and / or the the loader page is not covering the whole area, especially when extra content is shown (not even with height:100%; the only 'fix' for this is by using height:300%; but that is of course no solution).
So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?
I would possibly solve it like this: try demo
The advantage is, that the content of the overlay is centered and you are not stuck to a background image. So you can place any content into the overlay, for example a text "stand by" plus an animated gif.
CSS
body, html {
margin: 0;
padding: 0;
}
div.overlay {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.overlay > div {
display: table-cell;
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
vertical-align: middle;
}
HTML
<div class="overlay"><div>CENTERED ICON</div></div>
JavaScript
// on load finished
$(window).load(function() {
// select element and fade it out
$('.overlay').fadeOut();
});
Note that you should use $(window).load() as this fires, when everything is loaded completey, so images too.
Try something like this -> http://jsfiddle.net/3wU6C/5
try to define an element - or append it via js - as first node in the body, e.g.
<div id="load">Please wait</div>
with this style
html, body, #load { height: 100%; width: 100%; }
#load {
position : fixed;
z-index : 1; /* or higher if necessary */
top : 0;
left : 0;
overflow : hidden;
text-indent : 100%;
font-size : 0;
background : url(some-animated-loader.gif) center no-repeat;
}
then remove (or hide) that div when load or DomReady events occur