Empty Space in Safari on right side - html

I am at a loss and hoping you guys can help. I built my site using bootstrap 4.1, my website is http://www.visionary-creatives.com/ It seems to function as expected in chrome, firefox, and opera and IE. When I run it on Safari there is a white space on the right side, giving it a side scrolling function which is not intended.
I've gone through it line by line and checked width, and there doesn't appear to be overflowing which is causing it. I've also tried adding
html, body {
width:100%;
overflow-x:hidden;
}
This worked to fix the white space that's rendering. Unfortunately it also disabled my navbar from scrolling on those websites as well, and completely disabled mobile navigation. Sorry I don't have the entire code posted here, it's obviously long. If this question has been answered I'm sorry, I checked and couldn't find an answer regarding this.

In your bootstrap.css, find line #571:
#devDiv1, #devDiv2, #devDiv3 {
margin-top: 85px;
margin-bottom: -24px;
position: relative;
height: inherit;
perspective: 150px;
perspective-origin: 0 50%;
cursor:pointer;
}
Add overflow: hidden; there.

Related

blank space on right side of website, culprit is not visible

My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }

css ios webkit object-fit failing to correctly honor object-position

EDIT: had originally said the wrong iOS version (it's basically the latest, 9.3.5)
EDIT: thanks to the kind soul who edited the question to include the snippet.
not sure why my chrome browser is not allowing editing of snippets in the question editor anymore.
First up:
I tried to make a stack snippet for this question, but unfortunately the snippets editor is not allowing me to edit any code in chrome on a chromebook. I'm not entirely sure why stack overflow don't just write a simple importer that converts a jsfiddle link into the stack snippet format. If the editor does not work, I am forced to resorting to much maligned cut and paste code and link question format.
Anyway the link for my fiddle is https://jsfiddle.net/vwm2opf7/1/
A "full screen" link for that fiddle is
https://jsfiddle.net/vwm2opf7/1/embedded/result/
(because my issue is a mobile web issue it's best just loading that second link to observe the problem).
The code portions are here
html {
font-size: 16px;
font-family: Arial;
}
body {
overflow: hidden;
}
#div_page_header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
color: #FFFFFF;
background-color: #102339;
}
#div_image_banner {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#img_banner_pic {
width: 100%;
height: 100%;
object-position: top left;
object-fit: contain;
}
<body>
<div id="div_page_header">
<div id="div_image_banner">
<img alt="logo" src="http://www.graphicdesignbylisa.com/wp-content/uploads/generic-logo.jpg" id="img_banner_pic">
</div>
</div>
</body>
What I'm expecting it to see the logo graphic auto scaled,and inset 10px from the top left hand corner, and scaled to fit vertically to 10px from the bottom of the blue box, with the aspect ratio retained. basically exactly like this:
now in chrome on the desktop, it behaves correctly
on android chrome, it behaves correctly also.
using any browser (eg safari, chrome, opera, even the lastpass browser) on an iphone 4S running iOS 9.3.5, you get the logo image centered in the blue panel.
I'm assuming it a webkit issue.
I'm after a css-only solution to correctly position the logo, with scaling.
The reason for the 2 div approach, is i have found (in desktop at least) the only way to get the object-position to work correctly with an inset is to do this which then allows 100% to be used for width and height. even a calc (100%-20px) does not work properly. the reason for the inset is i'm using media queries to fine tune positioning for different sized screens. (not in this example, but i prefer to reduce example code to the bare minimum to show the problem, as in doing this it reduces complexity, and often I find the solution before finishing the question)
Yes, Safari 7.1-9.1 support object-fit but not object-position (see object-fit on caniuse)
No way around it other than using a polyfill like object-fit-images that will also fix object-fit in IE9+

Percentage padding difference only in Firefox

I developed different responsive boxes for the news in the website I'm working in. And everything seems to be working fine except for the news inside the slider on the top of the main content. It displays properly in Chrome, Opera and even in Internet Explorer, but not in Firefox. The problem seems to be in the article elements, specifically in the following lines of CSS code:
.home .first-level-post {
margin: 0px;
width: 100%;
padding-top: 45.1613%;
}
It's supposed to have a height of 280px, that's why I chose 45.1613% as its value. The container's width is of 620px, and it's 45.1613% is 280px.
When I switch the padding-top property off, it takes the 93.3333% value which belongs to the article elements present outside the slider (which are 300px wide), displaying as it should, but that value does not work in the other browsers.
I've been dealing with this for a while I can't seem to find a solution.
You can properly check this issue right here.
Thanks in advance, guys :)
Firefox is interpreting your padding based on a height of 0 due to inheriting from your .home article class.
Changing your CSS to this seemed to fix the issue for me in Firefox and not have an adverse effect in Chrome:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}

Issues with pointer-events and z-index

I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy, but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears behind all the rest of my content, but this is what I have so far:
here's my jsfiddle of my issue
it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:
.bottomdivtransparent {
pointer-events: none;
width: 100%;
top: 0px;
height: 300px;
left: 0;
overflow: hidden;
opacity: 0;
}
Which should make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..
Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?
Thank you!
edit: Thanks to Kasyx and Andrea Ligios for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..
As i noticed in comment pointer-events will not work in this case. But instead of it ill suggesting you to add margin-bottom to your div like in fiddle: http://jsfiddle.net/auFeV/6/
.bottomdiv {
//(...)
margin-bottom: 310px;
//(...)
}
(Thank you #Andrea Ligios for improving this answer)

Issues with Absolute Positioning of Div in Mobile Browser

I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: http://genesispetaluma.com/index.html in a mobile browser, including both Safari and Chrome on the iPhone. I ideally am trying to position a logo to appear at the right of my screen using the following css:
#verticalGenesis {
background-image: url("../img/Genesis%20Text.gif");
background-repeat: no-repeat;
display: block;
height: 570px;
opacity: 0.8;
position: absolute;
right: 3%;
top: 70px;
width: 123px;
}
This displays fine in all desktop browsers, just as I am expecting, but is appearing in the middle of the screen on mobile browsers. I have experimented with using right: 3% as well but I am having the same issues.
I am sure that there must be a simple answer to this problem but I have searched everywhere on the web and stackoverflow and I can't figure this out. Could someone please point me in the right direction?
Thanks,
Chris
This won't completely fix your issue but it will get you closer. On the parent div id=wrapFix you should add position: relative to it. The problem is that when you have an element with position: absolute it needs to know what it should be absolute against. While it worked fine on desktop browsers it broke on mobile. Probably because of screen size or something. But I've added that line to that div and it seems to be a lot closer to fixing the issue on iPhone.