I have the following issue:
I am making this website... I'm using html and CSS. I've been trying to maintain CSS as standard as possible and checking as I go with the three main browsers: chrome, firefox, and ie. In MY pc it seems to be working fine (with the exception of minor details). However, when other people open it in other screen dimensions , things fall out of place. Does anyone know why this might be happening? take a look at what i'm talking about this is the homepage:
www.britobmarketing.com/ledtogo/index.html
I bet it will be a little unaligned in some of your computers, but in mine it looks perfect. It's stressful!!!
Also, as I was saying, I'm trying to keep the CSS standard so that every browser can view it the same. But browsers like Firefox and ie do not recognize the "round edges" effect on the three buttons I have besides the video. It does work on the rest though, which is what confuses me! Anyone has any idea why this might be happening?
Thank you very much for your time and help!!
This is not an issue of browser rendering engines doing things different.
You aren't taking into account a variable width of the viewport. Your header and footer are centered, and your content is fixed left. So as the viewport gets wider, the header footer stay and the center and slides left.
So for your content, here's the problem:
#indexcontainter {
width: 980px;
height: 390px;
float: none;
margin-left: 170px;
}
In your header, margin: auto is what does the centering, making the left and right margin automatically equal each other. But for the content, you hard code a left margin at 170px.
Change that to use automargins and it starts to work great:
#indexcontainter {
width: 980px;
height: 390px;
float: none;
margin: auto;
}
Related
I'm admittedly not a fan of CSS and I hate even more responsive layouts but I'm creating an UI with Bootstrap (version 4, for what matters) in which I have some absolutely positioned elements that aren't exactly perfectly aligned as I want, be it in different native resolutions (monitor or VGA-defined) or when simply resizing the viewport (i.e.Ctrl++).
Since I began to create this UI I'm using vh and vw units for most elements (except those related to Bootstrap Grid, of course) thinking I wouldn't have such problem and this decision worked quite well for most of scenarios.
However, until now, I was using an old and very small monitor (1366x768) and recently I (finally) acquired a 21.5" monitor (FullHD, if this matters) and these values I've defined in my CSS rules, after exhaustive testings, are now slightly mispositioned, a bit to the left or to the top. For example:
This is a UUID I use for Unique User Identification in the Application and its positioning and text sizing was defined according to the rules below:
#user-identification {
bottom: 2.05vh;
font-size: 0.64vw;
height: 4vh;
left: 3.05vw;
width: 15vw;
}
As you may have noticed, the blueish background is in fact an image and the text is absolutely positioned on top of it, so I can reuse it for different use cases.
These rules created while developing in the small monitor where enough to center the text in the box of this background image. But now, in the bigger monitor I took this screenshot, you can see that the text is aligned to the left. It may be difficult to notice, I know, but this is a crop of the bigger picture which, unfortunately, I cannot show more :(
Well, I was about to start fixing all issues based on the big screen, for example, by changing the left to 3.4vw instead, but then I realized that if for any reason someone accessing the website is under the same situation I was before, the user experience would be prejudiced.
The first solution that came to me was to use Media Queries but I don't know the values I should be using to create the rules.
Worse! Regarding the viewport resizing, Firefox goes 10% by 10% while Chrome has a wider range (25%, 33%, 50% 67%...) and other browsers may have other values. And because I'm not a specialist I don't know the values I'm looking for to create the rules.
Can anyone help me?
Although it would be awesome, it's not my intention to fit the whole UI in the viewport of, for example, an iPhone 5 (the smallest I've found on Chrome Developer Tool with 568x320). I just don't want these small icons and texts absolutely positioned to be out of place.
[EDIT]
Describe the scenario in a Fiddle proved harder than I thought, that's why I tried to avoid it. But as asked, in this one I've positioned as best as I could and it looked good in the default preview area. But just by resizing it text already goes way out of positioning.
So I made this one, specifically for the embedded version. I believe it would be better as it's close to have the editor in one window and the preview in another (browser).
However, neither of them truly reflects what I really have. although the markup is compatible, both <img> and <span> inside the <figure>, I don't have these drastic changes when resizing the viewport. I have only small mispositionings on bottom and left.
I'm probably not extracting everything I should. I've got most of the Grid where this image (or the bigger, complete version of it) is located. .box is not relevant as it's just a few lines with linear and radial gradients and some box-shadow.
The whole UI is complex and I may have left something out of these Fiddles, but at least is something visual that shows positioning going wild when resizing (and definitely in different resolutions). My apologies for that.
This is the root of the problem to my understanding. There is an increase in height of the <span> element tied to the height of viewport, so the text container which is the <span> element is increased in height at the same time that the position of it via bottom and left are adjusted using viewport width/height. Removing the height setting of your elements in css, might solve the issues that you are having. Please leave a comment below, if this is not the solution to your question, and we can work together to the solution that fits this case. Thank you.
html, body {
font-size: 1rem;
height: 100%;
}
figure {
display: flex;
position: relative;
z-index: 1;
}
img {
height: 100%;
}
span {
bottom: 3.5vh;
color: #FFF;
font-size: 1.9vw;
/* height: 4vh; No need for this line right here. */
left: 1.1vw;
position: absolute;
text-shadow: 2px 2px 0px rgba( 0, 0, 0, 0.5 );
text-transform: uppercase;
width: 37vw;
z-index: 2;
}
<figure>
<img src="http://nick.mtvnimages.com/nick/promos-thumbs/videos/spongebob-squarepants/rainbow-meme-video/spongebob-rainbow-meme-video-16x9.jpg?quality=0.60" />
<span>f51bbe1e-7445-4545-bb84-15e614a119a2</span>
</figure>
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡
Can someone give me a clue about this weird behaviour?
When the browser is wide, we have a hint on the right side of a form
field. This is Ok.
When we narrow the viewport the hint gets to the bottom as it
should.
When we try to re-scale the viewport to be wide again, the hint text
overlaps other elements, instead of going to it's original position
as intended.
Chrome V.46 on Mac OS 10.
Step 1 - The browser is wide open - Hint text is on the right side
Step 2 - If we narrow the viewport, the hint moves to bottom. OK.
Step 3 - When we try to resize the browser window, the hint doesn't follow is position:
Step 4 - This is how the inspector looks like when the hint ignores the input field position:
Step 5 - I then uncheck the "position absolute" on the inspector window, and it stays like this:
Step 6 - Finally, I check that same checkbox, and it goes to the appropriate position.
As anyone had a similar issue before?
I've tried to reproduce this on a Fiddle, using the same rules, not just the exact same elements for obvious reasons, but it seems to work there:
https://jsfiddle.net/5m04na1u/1/
<div>Lets imagine I'm a form element wrapper</div>
<p class="hint-block">I'm a hint text block</p>
div {
position: relative;
width: 100px;
}
.hint-block {
display: block;
color: blue;
}
#media screen and (min-width : 56.25em) {
.hint-block {
position: absolute;
display: inline-block;
color: red;
}
}
Again, this is a Chrome only issue. Tried on other browsers and it worked well. But 99% of the time is my fault so, and even if it's not, I still have to fix this somehow.
Any clue or suggestion?
Update:
Here's a live code sample:
Sorry. I had to remove the link, because the product is not yet live, and the client had is concerns expressed.
My suggestion is:
Remove position: absolute from help block
Add vertical-align: middle to help block
Work like a charm for me
Adding
left: 400px to #media screen and (min-width: 56.25em) #checkoutform-email+.hint-block solves the layout issue, but not the root of the problem.
I believe this should be considered a browser issue. Since it calculates the initial left of the absolute element considering the width of its siblings.. After re-sizing the window, a layout happens and it won't consider the siblings width again, overlapping the inner contents..
You don't need the position absolute. Remove it and it works automatically.
What about making a div, where you can put your input? i think it should work
I am doing my first website and decided to use Bootstrap3. I've started to work over section with four 'feature' columns with one image per one of them. I am including link to my developer version of it:
http://tymekpudlik.github.io/kajtek/
In Chrome/Safari there is a problem that four image-icons (section where is a brain image) have much bigger height that they should have when we launch the site for the first time. When I open Chrome DevTools and click on css height property for image and enter one more time same, percentage value (90%), images are changing to correct size. Issue persists only for Chrome/Safari.
There is nothing special in css properties for image:
img {
display: block;
margin-left: auto;
margin-right: auto;
height: 90%;
width: 90%;
}
I'll really appreciate any help. Thanks!
Change stye of the parent element of that img (i.e div with class "feature text-center") as
height:auto; instead of height:100%;
This trick may help you..
I have a 3-column table which contains images. All td's have width="33%", and the images contained have CSS width:100%. In FF and Opera, the images scale like I want them to, i.e. fill the entire width of the cell, maintaining their aspect ratio. However, in IE7, they behave quite differently: I think the pic with the largest width stretches the entire column, and the smaller ones are stretched up to the new available width.
The page in question is: http://mybgagent.com/print.php?offers_id=4515
(I know the site is a mess, I didn't code it)
Any advice on what to do? Setting css position:absolute makes images scale correctly in IE, but breaks scaling in Opera and FF, as well as positioning in all browsers.
I ran into this issue a lot with IE7 "compatibility" mode. the easy fix was to not only put
width: 100%;
in my css, but also
width: 100%;
float: left;
cleared that nasty hiccup right up.
Sounds like you have a solution for each browser but no way to target it, well here comes the CSS Browser Selector to help you with that! Just plug in this jQuery to your site (in the <head> section), then write separate rules for IE and the real browsers and append .ie before your IE selectors :)
Works great, I use it all the time!
Example:
myTd
{
background: #f00; /*whatever your rules are*/
}
.ie .myTdv
{
position: absolute;
}
And that's it!
Try setting the style of the parent cell to position:relative.