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.
Related
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.
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+
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%;
}
Side by side picture of problem:
My website is http://berathen.com
For what ever reason everything looks to work just fine in IE, Firefox, and Chrome, but not in Safari. For some reason my left and right div sections join together at the center.
#leftSide
{
position: relative;
left: -350px;
max-width: 320px;
}
#rightSide
{
position: relative;
left: 650px;
width:0px;
height:0px;
}
Any help or advice would be greatly appreciated!
I spent few minutes inspecting your site in an old version of safari.
When i tried to apply left:0 to #outerBox2 inside #leftSide, It in turn brought the right box to left side as well, which is when i noticed that your HTML is invalid - You have multiple elements with id outerBox2 (id should be unique in a document, You can use class instead to apply common stuff).
Which i think is causing the problem and fixing it might solve the issue.
Anyway, Few other things i noticed while inspecting (might or might not help you)...
The content of div#leftSide is position:fixed, hence it has a height of 0px. You might not even need it.
You've manually appled width and height equla to 0. I wonder why! (You might not need that as well then..?)
The content in middle does not have a container, or wrapper. If it has one, it's easy to apply padding or margin to both sides and absolutely position the left and right content or float them left and right respectively.
Side note: By seeing all this i was wondering how this works in modern browsers... i'd just say they're being too kind towards you... :)
This is what you can do:
#leftSide {
position: absolute;
left: 0;
max-width: 320px;
}
I don't think safari picks up negative left if position is relative.
When I coded my website on my 18 inch screen, everything looks perfect! But, once I got over to my Mac (13 inch) everything just went big and the divs were crashing and everything looks extremly zoomed. I know this have something to do with sizing and the position, but I need further help.
One of the CSS it happens to are this code, is something wrong?
#client_play {
position: relative;
padding-top: 125px;
padding-left: 560px;
padding-bottom: 200px;
}
Link to page: like4fame.com/rsps/index.html
Link to my css: http://like4fame.com/rsps/css/css.css
A good starting point to resolving this issue is to remove the position: absolute, position: relative, and position: fixed styles in your code.
You also want to avoid using <center> and go with text-align: center or margin: 0 auto to center your text or div.
Removing all those styles from your code should help you achieve a better overall website fit for several screen sizes.
I also agree with jfriend00 above about reading about responsive web design.