I'm a newbie here, nothing special, just have a little bug with Microsoft-Edge, it adds a random overflow-x while there's no content passing the screen's/browser's width, tried it on different screens and resolutions and the problem still there.
Here's a link of what I've done, if you want to test it on Microsoft-Edge : http://microsoft-edge.thefreecpanel.com/
A photo : Photo Showing overflow-x bug
Thanks in advance.
Try to set Margin to 0.
Make a test with code below and let us know whether it solves your issue or not.
html, body {
height: 100%;
}
body {
margin: 0; /* This will stop the margin, setting it to 0 */
}
div {
width: 100%;
height: 100%;
background: #ddd;
}
<div></div>
Related
Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
I'm using intro.js to guide users through my application the first time they log in. It's a great tool and it works, the only downside I see is that the introjs-tooltip element is not responsiv.
As you can see below the tooltip has a min-width and max-width in px which really don't make it very responsiv. Also this makes the image I include in some of the steps really small and kind of useless, because of the small size.
CSS - Simplyfied
.introjs-tooltip {
position: absolute;
visibility: visible;
padding: 10px;
min-width: 200px;
max-width: 300px;
}
I have been working on this "issue" for a few days now, and can't figure it out.
So my questions are: Is there a way to make the tooltip use % instead of px without having to change to much in the intro.js file? If not, what would you guys recommend me to do?
You can provide own implementation for .introjs-tooltip in your custom css file:
.introjs-tooltip {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
or you can use an additional class eg: .tooltip-large:
HTML
<div class="introjs-tooltip tooltip-large">
...
</div>
CSS
.tooltip-large {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
In my case, "min-width" and "max-width" css rules are not working as expected, at least for floating tooltips in a responsive desing. In ended up doing the following. Maybe this is helpful for someone (tourTooltip is a custom class I defined for tooltips):
/* Size < Small */
#media screen and (max-width: 756px) {
.tourTooltip {
min-width: 300px;
}
}
/* Size > Small */
#media screen and (min-width: 756px) {
.tourTooltip {
min-width: 500px;
}
}
I am currently trying to implement the gallery on my web page that is seen here.
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
The gallery is made so that jquery detects the windows height and creates an expanding box that spans the width below the thumbnail. The problem is that this set height cuts off the information that I am currently trying to put into the expanding preview. How could I change the code so that the box expands based off of the internal elements. (Similar to CSS auto height?) Or is there another option to allow all the information to be seen?
I attempted to do a jfiddle but it isn't working.
http://jsfiddle.net/sasmith/8FpQM/2/
function getWinSize() {
winsize = { width : $window.width(), height : $window.height() };
}
ok after struggling little with this css, this might not be the perfect solution , and because i dont have much time to read the whole code , just modify the following and the page should work fine afterwards as i hope .
open the basic.css file , and modify the class .og-expander to become :
.og-expander {
position: absolute;
background: #ddd;
top: auto;
left: 0;
width: 100%;
margin-top: 10px;
text-align: left;
height: auto !important;
z-index:99;
overflow: hidden;
}
also add the following to the css file :
.og-grid li.og-expanded
{
height:900px !important;
}
i have saved the modified files , and upload it here :
https://www.mediafire.com/?y3ihnadu343dsui
please let me know if it works correctly for you
I won't post the code directly but you can see it here: http://markbrewerton.co.uk/work.html
I have links which load an iFrame into a DIV when they are clicked, however, as you will notice, the parent DIV is stretched and goes down really far. I'm pretty new to all this, so could you explain how I can fix it?
Cheers
The first part is the setup the bounds of the div by using the height and width styles.
After that set the overflow style.
Overflow has different values. Auto will likely get your the desired result. http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx
Try this (if you want scrollbars):
#yourdiv {
height: 300px; /* fixed height */
overflow: scroll;
}
...or this (if you want to just clip the content):
#yourdiv {
height: 300px;
overflow: hidden;
}
Edit: You can also fix the height of the <iframe> itself:
#youriframe {
height: 300px;
}