I'm having an issue, primarily on mobile devices (in my case, an iOS device) where a div is seemingly preventing scroll-chaining; this is problematic because it's the first place you would touch to scroll (as opposed to a smaller div above it). Similarly for scrolling back up. I couldn't find anything online stating that there was a parameter or property default to mobile webkit that would contain a div. It seems though maybe this is behavior on iOS webkit, as notably, a second swipe on the final image after the "bounce" of the scroll of the div returns to normal positioning in the div allows a scroll (sometimes seemingly inconsistently?)
I've managed to recreate the issue with a test with minimum code repeated from my project (view on mobile! overscroll works fine on desktop)
https://codepen.io/hennigarj/pen/ZEjYrpW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#container {
display: block;
width: 100%;
height: 100%;
padding-top: 4vh;
}
.flex-items {
width: 100%;
overflow: auto;
}
.flex-items:nth-child(1) {
display: block;
height: 10vh;
}
.flex-items:nth-child(2) {
display: block;
margin-top: 4vh;
margin-bottom: 4vh;
height: 64vh;
text-align: center;
}
.flex-items img {
max-width: 100%;
}
.flex-items:nth-child(3) {
display: block;
padding-bottom: 6vh;
}
</style>
</head>
<body>
<div id="container">
<div class="flex-items">
Div 1
</div>
<div class="flex-items">
<section id="highlights">
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
</section>
</div>
<div class="flex-items">
Div 3
</div>
</div>
</body>
</html>
Anyone have any ideas? I've tried all sorts of overflows and overscroll-behaviors on everything but nothing seems to fix this, and there is no value to specifically enable scroll-chaining through overscroll.
This is probably clear as day and I'm completely missing it.
Thank you :)
I've tried various different potential heights, overscroll-behaviors, overflows on divs (to no success). Ideally, hitting the end of the div would continue the scroll-chain past it, just as it does on desktop, but it contains. I've tried -webkit-overflow-scroling: auto as well.
Related
I'm attempting to create a webcomic style layout in HTML5 and CSS for personal learning. My goal is for the main-container class and all of its contents to fit inside the browser's viewport. The problem I'm encountering is that the image scales up at certain window sizes and the HTML that comes after the image is cut-off.
I've attempted to apply max-height and height values using the "vh" unit of measure in the main-container css. I can't seem to get it to work correctly. I've tried things mentioned on Stackoverflow (This and This), but none seem to produce the desired result. I'm thinking I'm missing something basic about the CSS behavior.
(if it matters, this practice image file is 800x500 in size by default).
Here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
max-width: 100%;
height: auto;
}
.main-container {
display: flex;
flex-direction: column;
}
.comic-container {
display: flex;
flex-direction: column;
margin-left: 5%;
margin-right: 5%;
}
.comic-image {
object-fit: contain;
}
.comic-nav {
display: flex;
}
.f-center {
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/comic.css" rel="stylesheet" />
</head>
<body>
<div class="main-container">
<h1 class="f-center">Site Title</h1>
<div class="comic-container">
<h4 class="f-center">Comic Title</h4>
<img src="../images/placeholder.png" alt="Comic Image" class="comic-image" />
<p class="f-center">Comic Text and Punchline</p>
<div class="f-center">
First |
Previous |
Next |
Last
</div>
</div>
<h6 class="f-center">Copyright ©XXXX - Person</h6>
</div>
</body>
</html>
Window-size shrunk, all contents fit
Window-maximized, contents cut off
Well, that's how flex boxes work in concordance with max-width/width set to 100%. The image will grow and will take the whole width of the flexed div/container.
display: flex;
flex-direction: column;
margin-left: 5%;
margin-right: 5%;
}
Technically, for your current display, you don't really need this. But if you want to keep it and restrict the image, you can either set a set width (i.e., 60%) for your image or have #media queries do the job of restyling the view accordingly.
I made a header. It contains only a logo and a website title. The logo is a link to the main page. My problem is that I can't seem to get the logo to be all the way to the left in the header and I want it to resize so it fits into the header (instead of: header gets bigger because of logo). I placed the logo and the website name/title in two different divs.
Setting the with or height to 100% was something that often came by. I have tried to use this, but it wouldn't work.
"object-fit" should also be an option, but my IDE doesn't recognize this property.
When I use "float: left;" for the logo, it goes all the way to the left, but it also goes out of the header (well, it looks like it does) and pushes my other divs beneath the header/page content to the right.
the HTML:
<div class="header">
<a href="index.html" class="logo">
<img src="image.png">
</a>
<div class="header-right">
<h1>Website title/name</h1>
</div>
</div>
the CSS:
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.logo{
display: block;
margin-left: auto;
max-width: 100%;
height: auto;
}
one way you can achieve this by having two images one for desktop version and other for mobile version. Using window.navigator you can identify whether you are in mobile or in desktop.
Sometimes resizing the logo may shrink and may not look good. Instead having two different logos (small one for mobile = small size) should serve your purpose.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.logo{
float: left;
display: block;
margin-left: auto;
width:250px;
height: 50px;
height: auto;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html" class="logo">
<img width="200px" height="150px" src="https://groceriesandveggies.in/wp-content/uploads/2017/09/gv_small_logo.jpeg">
</a>
<div class="header-right">
<h1>Website title/name</h1>
</div>
</div>
</body>
</html>
So, I'm trying to make a mobile version on my desktop site (Have a look here to see what I'm going for www.adamaucock.com).
The issue I'm having is that I can't seem to set the height correctly, in that my content is about half the page and then the rest is just dead space so the height is set too short for the window. Working with the body tag didn't work and I've seen people suggesting wrapper elements also but I can't seem to get that to work. I've tried using vh and %. I've also tried hiding the overflow for x and y separately and together on both elements to no avail.
The only thing that fixed the issue was setting the wrapper to be fixed but then the scrolling didn't work at all.
HTML:
<body>
<div id="wrapper">
<div class="box" id="welcome_box">
<div class="welcome_title">
<h2 id="video_head">Hi, I'm Adam.</h2>
<h1>And here I am testing this website.</h1>
<h3>Scroll to See More</h3>
</div>
</div>
</div>
CSS:
body {
background-color: #04244F;
font-family: raleway;
margin: 0;
padding: 0;}
#wrapper {
width: 500vw;
height: 100vh;
background-color: aqua;}
Any help would be much appreciated.
Thanks in advance.
So, I have just found a solution but I'm not sure how well it'll work across devices. I used the viewport meta tag to set the initial scale to .25 rather than 1 like so.
<meta name="viewport" content="width=device-width, initial-scale=.25">
On the two devices I have to hand (Google Pixel 1 and iPhone 4) it seems to work. Will update if I run into any problems with this approach.
overflow-y: hidden on the body/html should do the trick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
body {
background-color: #04244F;
font-family: raleway;
}
#wrapper {
width: 500vw;
height: 100vh;
background-color: aqua;
}
h2 {
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box" id="welcome_box">
<div class="welcome_title">
<h2 id="video_head">Hi, I'm Adam.</h2>
<h1>And here I am testing this website.</h1>
<h3>Scroll to See More</h3>
</div>
</div>
</div>
</body>
</html>
I am having some issues with making my bootstrap layout fill the whole page. This is the jsbin for what I currently have: http://jsbin.com/tibusakuci/edit?html,css,output
I'm having trouble making the grid fill the entire page. I want it to look like this (filling the entire screen):
With it looking like this on mobile screens:
Does anyone have any ideas of why my code won't fill the whole screen when I take out the min-heights? Using bootstrap. Using height: 100% doesn't work either.
*Currently the boxes only fill half the screen
Thank you!
UPDATE: The follow code will fix your gutter issues. But it looks like your main issue is with the fluid container not filling the entire page.
CAUSE / SOLUTION: According to this github issue - Fluid Layout with 100% height #1671 - there is no "out of the box" solution. Try implementing one of the few solutions (with jsfiddle code) in that issue thread.
PREVIOUS ANSWER (partially obsolete)
Working jsbin: http://jsbin.com/rilihit/1/edit?html,css,output
STEPS
Remove the margin-bottom declaration from .row > div and from .sidebar-bottom.
Declare this css in your custom css file to remove the default bootstrap column gutter. This code is responsive and will work for all column sizes
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Finally, in your HTML, add the no-gutter to the rows like so.
Here's the complete HTML and CSS code. I modified your jsbin code and tested it. (I made the sidebar-bottom's min-height = 160px; so that the min-height values for the 2 add up to the min-height value for the content and nicely line up in desktop view. )
.row > div {
background-color: green;
}
.header,
.footer {
background: blue;
}
.content {
background: pink;
min-height: 300px;
}
.sidebar-top {
min-height: 140px;
background: yellow;
}
.sidebar-bottom {
min-height: 160px;
background: lightblue;
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-sm-7">
<div class="content"></div>
</div>
<div class="col-sm-5">
<div class="row no-gutter">
<div class="col-sm-12">
<div class="sidebar-top"></div>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-12">
<div class="sidebar-bottom"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related Reference / Reading: Bootstrap 3 Tips and Tricks You Still Might Not Know
Remove padding from the container-fluid and col-*. You can use vh for full hieght, and adjust this accordingly for 33% height on smaller screens.
.content {
background: pink;
min-height: 100vh;
}
.sidebar-top{
min-height: 50vh;
background: yellow;
}
.sidebar-bottom{
min-height: 50vh;
background: lightblue;
}
#media (max-width: 768px) {
.content,
.sidebar-top,
.sidebar-bottom {
min-height: 33vh;
}
}
.row.no-gutter {
margin-right:0;
margin-left:0;
}
.row.no-gutter > [class*='col-'],
.container-fluid {
padding-right:0;
padding-left:0;
}
Working demo: http://www.codeply.com/go/r3Rdffxi7A
remove padding and margin of surrounding, and remove the negative left and right shift.
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/