Keep object in center when zooming? - html

I've build my website using Wordpress (booo, i know) and I have a sticky menu (Menu from Elementor Pro, sticky header plugin from Sticky Menu (or Anything!) on Scroll) that always is showing on the top of the screen when you scroll.
To center this menu i've used custom CSS to the menu-element:
`
.center {
margin: auto;
width: 50%;
}
`
The problem is if i zoom in the browser, the menu gets off center the more i zoom. Until i refresh the page and it pops back in center.
Is there a way with CSS to keep the scaling and center of an object the whole time so it updates as i zoom. I want it always the same size, always in the center.
https://www.loom.com/share/fd55196094f942e98b800fcec7250228 Here is a videolink of the problem.
I've tried using:
`
.center {
margin: auto;
width: 50%;
}
`
It centers the block but when i zoom in or out, it jumps out of center until i refresh the page.
Website URL is https://visopro.se/

Related

footer is not sticking to the ground

This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.

Wordpress Twenty Seventeen Header Scroll Mobile Zooms in

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.

Website container won't align to the centre (Mobile and web)

Hoping that the community will be able to help me out here as I really am stuck. I've having 3 I issues with my website:
Website Link
For some odd reason - I can't get my columns to line up straight. The entire page seems to be more to the right than in the centre on both desktop and mobile
What I'm trying to do with the top image is have it take up the entire page upon loading, and then as you scroll, the image disappears. For some reason, on mobile, the image doesn't cut off and allows for the user to scroll to the right.
On mobile, I can't get the top image to show properly. It stretches vertically, and users have to scroll all the way past the photo to get to my content... I want the main image to resize like it does on a desktop browser and only take up the screen real estate when the page loads
Any advice here would be helpful...
In your projects sections - if that is where your issue is has padding on a UL tag - which is causing it to look misaligned.
You could do this to fix that section:
ul.skillssection {
padding-left: 0;
}
It'll be more helpful for the community if you made points or set up a jsfiddle.
Update - answer for number 2.
I can't seem to replicate it but I've noticed you've got:
img.bg {
min-height: 100%;
width: 100%;
min-width: 780px;
overflow: hidden;
}
I would change it to:
img.bg {
min-height: 100%;
max-width: 100%;
overflow: hidden;
}
So the max-width is always 100% and it should follow the width of the parent.

Make vertically centered div tag stick to top on window resize?

I'm building this portfolio website, and it needs to be vertically centered. The only problem is, when the window is resized vertically down past a certain point, the menubar is cut off. How can I get the site to stick when it touches the ceiling of the viewing area?
http://home.comcast.net/~swiftmail/aspect/index.html
You need to add "stick" class dynamically with JavaScript.
#vertical_center .stick {
top: 0;
height: auto;
margin-top: 0;
}
You may look at JS workaround to do this:
Get the size of the screen, current web page and browser window

HTML CSS browser sidebar always visible in website

this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.