I just completed a challenge for FrontEnd Mentor and was texting a friend my demo link to show off/celebrate. But when I went to open the link on my phone I noticed the formatting was all messed up. I've since opened the site on Safari, and the height of the div.selected-plan is getting all messed up.
This is what it looks like on my machine with Chrome.
And the distorted Safari version.
Link to the live site so you can view the html/css.
Why is Safari distorting things and how do I prevent it from happening in the future?
Give below CSS to your SVG I think It Creates height
.music-icon {
margin: 1em;
padding: .25em;
max-width: 48px;
max-height: 48px;
}
Related
I'm building a responsive personal website and I've encountered a weird problem. I created a menu for my website. Since its homepage and content pages have different CSS files, I put the same menu code into both CSSs. It works and looks same on my pc browsers (Firefox and Chrome) but when it comes to mobile browser the font-size changes even if they are same in the code.
This is what the homepage menu looks like on pc browser:
And this is the inner menu, also on pc. They are identical:
This is what the homepage menu looks like on mobile. (iPhone Safari) This is the expected result:
However my content pages' menu looks like this and it's not user friendly:
As far as I tested I believe the problem occurs on Safari. I also tried Mobile Firefox Browser and it looked decent. I don't have a clue about Android browsers though.
By the way this is the menu list styling code part of my two CSS files. Entire code is in vw or %
.menu-pane li {
padding-top: 1.8vw;
padding-bottom: 0.1vw;
margin-left: 1vw;
font-size: 80%;
font-family: 'Josefin Sans', sans-serif;
}
Use this code on your CSS file
html{
-webkit-text-size-adjust: 100%;
}
Trying to find an answer to why chrome on mobile phone shows the same code differently than desktop chrome (and firefox, edge, opera). The <a> text has a different position in <div> container.
PS. Ive marked "BOOKS" on the screenshots to make it more visual. On desktop view <a> is in the middle, on mobile - to the top.
desktop:
mobile:
HTML:
<div class="topbar" id="tb-grad">
<a class="logomain" id="lm-shad">BOOKS & DVD</a>
<a></a>
<a></a>
</div>
CSS:
.topbar {
max-width: 600px;
font-size: 40px;margin: auto;
border-radius: 10px;}
.logomain {
font-family: 'Luckiest Guy', cursive;
font-size: 40px;
color: yellow;}
I went through the exact same problem and after many tests and missed hours found that fonts change in Chrome Mobile X Chrome Desktop.
I know i may have arrived late, but if anyone experiences this problem try switching the font used for another. A good place to find fonts for this test may be the Google Fonts site.
Test some sources for you to observe this behavior.
If you wish, you can control the highlight colors using the following:
::selection {
background:#BBD3FD;
}
::-moz-selection {
background:#BBD3FD;
}
This will ensure that the background color of the highlighted segment is the same across all devices.
#BBD3FD is the pale blue that Google Docs uses for its highlight background.
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>
![enter image description here][1]So i have created a website that i have tested and it works fine in all major browsers, except for when I am running windows 8. Windows 7works fine but i windows 8 a lot of my css is being affected.
I was wondering if anyone knew a list of things that were different or displayed differently because of this as i really do not want to re write the whole thing!
It appears as though padding might be adding to the height/width properties or something im not quite sure but would appreciate a heads up on any niggly things anyone else has found before i try tearing my css to pieces!
css
.whitebox-index {
background-color: #fff;
max-width: 1044px;
min-height: 1055px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#banner {
width: 1024px;
height: 370px;
/*margin-bottom: 10px;*/
position: absolute;
background-image:url(../images/bannerhomebackground.png);
}
In chrome etc this displays as a my white background witha banner at the top and has the even white gap around it but in windows 8 ie this has the 10px gap to the left and top but the right has a 30mm gap.... the width has increased...
I just needed to uncheck "Display intranet sites in Compatibility View" from the Compatibility View Settings menu.
Edit:
Worth noting that this will affect all of your intranet sites. You could alternatively use the x-ua-compat meta tag to set the docmode to Edge. – Jonathan Sampson
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.