This one is a rather weird question, but please help me to find at least a solution or a possibility.
On our website we have some sort of round button with a centered "+", which opens a set of other buttons to the bottom when clicked on.
These popped up buttons only have icons as centered content, each fitting to 24px width and height. For centering we use the method with left: 50% and top:50% as well as transform:translate(-12px,-12px) - the usual centering apart from flexbox methods.
On all our tests these icons where fairly centered (of course there is always some pixel differences with crossbrowser and crossdevice).
Now the last problem remaining is, that on Lenovo ThinkPads (browser of choice) the icons are far off the position they should be; like 5 to 6 pixels to the left or bottom. We could not figure out how we can fix this problem to this day.
On any other device, let it be a Laptop or a PC stationary with the same installed Windows and browsers, it is displaying as intended.
My question now: Does anyone have an idea WHY the Lenovo ThinkPads are displaying these icons differently? Is there something Lenovo ThinkPads are rendering differently or is it the DPI or something else we are just unaware of?
Many thanks for your possible answers.
You should check the device pixel ratio
of your device, There are some cases when it causes a problem even if you use translate and proper pixels.
This website can help you get the details.
Target them using media queries and variable pixel ratios:
#media only screen and (min-device-pixel-ratio: 2) {
/* your code */
}
Hello all interested people,
We've discovered the issue in the font-family: "Material Icons". This CSS adds unnatural behaviour on Lenovo ThinkPads, adding weird whitespace on the right side of some icons.
Thank you for your suggestions and help :) Much appreciated.
Related
I've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer. The browsers that are giving me issues are chrome and safari.
On the bio/landing page (http://designerdsite.com/new/) toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!
I discovered a similiar issue on my site. As far as I could figure this out, it seems that Chrome/ Webkit has a problem with the correct (re-)positioning of floated elements.
So there are 2 (maybe more) options:
1. You may use Javascript to force the Browser to re-render (not reload!!!) these elements (e.g. by changing the display property to none and back to block)
2. Use another positioning variant like 'inline-block' or 'table-cell'
Why don't you use twitter bootstrap that will make your life really easy.
it seems like you used media-query for your site right???...anyway so iguess you know the reason....for example lets assume your last media-query max width was defined as 600px ...then it will work fine upto 600px and below(not far)....when your browser is resized to width:480px (for ex.) then your design like font-size,padding etc are getting very large to fit two divs side by side....so if you want to keep your design intact for microscopic width then lets have one more media query definig that limit max-width:480px;
for example
.fonts{
font-size:18px;
}
#media screen and (max-width:480px){
.fonts{
font-size:10px;
}
}
Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.
You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.
Try wrapping the quotes in a 100% width div:
<div class="quote-wrapper" style="width: 100%;">
<div class="reference clear-both">
<img src="images/monica.jpg" alt="Monica" class="reference-pic">
</div>
<div class="quote">
<p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
<p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
</div>
</div>
It has to do with how browsers compute percentages. A quick fix for that is to set a max-width for the left container:
#skills-left {
float: right;
width: 47%;
max-width:411px;
}
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting
I am using Flexslider in Drupal along with Views Slideshow with the Omega 3 theme (html5+960 grid) but I am not sure that matters for this questions.
On this page in IE8/9 when viewed on a 1024px wide display, it leaves a huge gap on the right. See this screenshot.
I am suspecting it is the flexslider js because it adds the negative margin after the page loads.
Any ideas?
Was the flex-control-nav width and positioning. Turns out it was happening on Chrome too, I just thought it was IE since the virtual machine was at that resolution.
The Outline Block Elements bookmarkletis what truly saved the day, and it turns out that this question which was mostly the same was the motivation for figuring this out.