Wordpress Twenty Seventeen Header Scroll Mobile Zooms in - html

I am using WordPress Twenty Seventeen for my website and I am having an issue with my header image on mobile. When I go to start scrolling, the header image kinda zooms-in, I have tried to google this issue but came up with nothing, I've tried going through the CSS code and don't see any transitions or the elements changing when I inspect them, Here is an example site:
https://2017.wordpress.net/
The header image is shorta zooms in when you start scrolling, is there away to prevent this so it stays the same size before scroll?

This is happening because mobile-chrome calculates the address bar into the viewport height and while scrolling webpage the address bar scrolls too and the visible area changes it's height dynamically.
E.g. on 320px X 360px screen, on mobile-chrome with address bar the height of viewport is 564px and after scroll when address bar disappears, the height of viewport changes to 620px.
Viewport Height with address bar
Viewport Height without address bar
Now image in .wp-custom-header taking min-height:100%;height:100% which will change height dynamically, therefore image changing it's dimension while scrolling.
Better way is to fix height of image in pixels in media queries.
.has-header-image .custom-header-media img{
height: 620px;
min-height: 0;
}
Similar issue:
css3-100vh-not-constant-in-mobile-browser

Add position: relative; to your cover img:
.wp-custom-header img {
position: relative;
}
The current position is fixed, which in conjunction with object-fit: cover;, is causing the zoom effect.

You can try following css:
html, body {
height:100%;
}
html {
overflow: hidden;
}
body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
This will prevent the browsers from hiding address bar. So we will get rid of the jump while we scroll.
I have tried this in your url and it is working.
I suggest to use this in appropriate media queries.

Related

Scrollbar only on one div and not the whole body

I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.

Header not 100% in width when zoomed in

This is kind of weird, and I don't know how to explain this much here. When you zoom in to my website and scroll to the right, the header part + title box is missing. This does not happen when it is zoomed out. Previously, I set the body-width to 1024px and when I zoom out the entire page zooms out to the left (which is not desired if someone has a higher screen resolution) and I prefer it to remain centered. So, I let the body fill the full width but this does not appear to do so for the top part. Not sure what is causing it.
header {
width: 100%;
body {
width: 100%;
}
See my website here and you will be able to understand.
JS fiddle here: http://jsfiddle.net/D22Jd/
Zoom in and scroll to the right to see what I meant
Adding the below code to CSS will fix your issue.
html, body {
min-width: 1024px; /*adjust as per your need*/
}

Vertical navigation that stretches entire page

I need a vertical navigation that will stretch the entire screen. How can I do this?
Typically, I would set the navigation with:
position: absolute;
height: 100%;
overflow-y: hidden;
but I can't get this to work for me for some reason or another. It shows a scroll bar regardless, and doesn't stretch the entire page--only the height of one viewport. You can view a working example here:
http://solstaging.net/vhosts/dealer-world-delivery/
Add position: relative to your body tag and the #primary will be the full height.

Make element fixed position, but follow page scroll if content too big

See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}

HTML body height - fixed?

I'm trying to make the main body of my site to have a fixed height (I think!).
Anyway, the site body is just white, with a border of size 1. Basically, the size of the body is determined by what's in it so, for example, it will resize automatically as more things are added.
What I want is vertical scroll bars so the body doesn't extend forever (is that right?). Should I have a fixed body size?
If you want vertical scroll bars you can use this in your CSS;
body {
height: 900px;
overflow-y: scroll;
overflow-x: hidden; /* hides the horizontal scroll bar */
}
What are you trying to accomplish? You sound unsure if you even want the scroll bars; is there a reason you want to show the scroll bars instead of just having the browser handle the scrolling when the content gets larger than the window?
Yes. You need a fixed height
body{
height: your-height;
overflow:auto;
}
will generate scroll bars only when you overflow the area without growing it vertically.
So, in your body create a layer:
<div id="mainbar">
</div>
And using CSS you can set the height:
div#mainbar {
min-height:100px;
overflow:auto;
}
The min-height guarantees the initial height that you need. Once it goes over that, it you will automatically have scrollbars. If you would rather the page itself scroll and the body lengthen, just take out the overflow line from the CSS.
If you want the vertical scroll bars to an inner div on your site (like so you can have a footer visible at all times), simple specify the height of the div:
#inner { max-height: 300px;
}
I think the default for the overflow is to scroll, but if your content is cutting cut off with no scrollbars, you could also set
overflow: auto;