I have no idea what's causing this, but it seems like some combination of grid container, ul and li text being wider than the container causes the font size of the text to GROW as screen size of either smartphone or in Chrome phone simulation. This of course causes text to be disproportionate towards the rest of the page which pretty much breaks any design.
As far as I can say this should replicate the problem:
<html lang="sr">
<head>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
font-style: normal;
font-family: Robo, Arial, Helvetica, sans-serif;
font-size: 16px;
display: grid;
grid-template-columns: 300px auto;
}
.nav {
margin: 0;
padding: 5px;
grid-column: 1;
background-color: yellow;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="nav">
<p>THis is a test text to show when and how this effect happens.</p>
<p>THis is a test text to show when and how this effect happens.</p>
<p>THis is a test text to show when and how this effect happens.</p>
<ul>
<li><h3>Test</h3>
<ul>
<li>ABC</li>
<li><a href="#" >THis is a test text to show when and how this effect happens.</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
With this page if you open it on a computer it should show something like this:
But if I switch to device mode in Chrome inspector and reduce the width I get something like this:
Same happens if I view the page on a smartphone:
Inspector shows that for example that ABC item, even though it's font size should be 16px, the height of the item is 49px, for some reason.
So, what completely obvious thing am I missing here?!?
This is because you didn't set the viewport. Try to add this to your head.
<meta name="viewport" content="width=device-width">
Related
I'm making a responsive GitHub Homepage Clone (https://github.com/) with HTML and CSS before moving on to JS. I'm currently working on a search bar. However, when I narrow the screen from the left side, the search bar width stays the same, causing the search bar to leave the entire left navigation bar. Any help would be greatly appreciated :)
P.S. Please view the code snippet at full page view
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
font-family: Helvetica, sans-serif;
}
#left-menu {
background-color: white;
width: 25%;
display: flex;
flex-direction: column;
}
#left-menu-items {
margin: 40px 15px 300px 25px;
width: 85%;
}
#left-menu input {
background-color: transparent;
border: solid 1px #e1e4e8;
border-radius: 5px;
outline: none;
margin-bottom: 20px;
padding: 8px 113px 8px 10px;
}
#left-menu input::placeholder {
color: #d2d5d8;
font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/735c9ee1fa.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>GitHub Homepage</title>
</head>
<body>
<section id="left-menu">
<div id="left-menu-items">
<input type="search" placeholder="Find a repository...">
</div>
</section>
</body>
</html>
The element I'm working on is the search bar that says "Find a
repository..." In order to allow the box to stretch to the right, I've
added a ton of padding.
Hi, Joshua.
In this case, asking a question with so many parts is hard to answer. If you can create a smaller example - it might help.
<aside class="sidebar">
<input type="search" placeholder="Find a repository">
</aside>
.
.sidebar {
border: 1px solid blue;
padding: 10px;
}
input[type='search'] {
padding: 5px 10px;
font-style: innherit;
}
https://jsfiddle.net/sheriffderek/smnovwqj/
From there - we can help you. You can always ask in the CSS Discord too.
HERE: with the sidebar in tact: https://jsfiddle.net/sheriffderek/e6k8gydu/
Presumably you want the search input to shrink and grow with the page.
To that end, you should use max-width: 300px along with flex-grow: 1 on the <input>.
flex-grow tells the flex-box how to allocate space along its main axis (in this case, the X axis). The value you give it represents a fraction of the parent flex-box. So in this case, if give it the value flex-grow: 1 it will take up as much space as it can, until it runs into another fixed with element, or another element that also has flex-grow set with a nonzero value.
Max-width simply tells the element how large it's allowed to get. You can obviously fine tune this by changing the value, but 300px seemed about right to me.
Put the two together and you no longer need your crazy padding. The input will shrink all the way down to nothing (if you want that to change you also add the min-width property)
and grow all the way up to 300px in this case.
You'll also also want to get rid of the <p> next to your text input. In this scenario, there's no reason at all to use a paragraph, as it has default styling that changes how it behaves. I would use a <div> instead.
After that I would get rid of the relative positioning on nav div p{} and just let flex-box do its magic. If you're trying to position an element in that way, a much better way is with margin. This is what margin is meant to be used for.
Sorry my answer isn't a more specific, but your question is a bit broad.
I have a web application that is responsive. I simply cannot see the full label for an HTML select on an iPhone. It will say something like "really long str.." Is there a fix out there for this? Androids wrap the selections.
I have no idea how to fix this, as you have not provided me with a snippet of code. Copy the html from your page and edit the question. Otherwise, you can try using css #media rules. Try doing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example code</title>
<style rel="stylesheet">
p {
padding: 1%;
text-align: center;
border: solid 5px black;
border-radius: 25px;
color: white;
background-color: grey;
display: inline;
margin: 10px;
}
}
</style>
</head>
<body>
<div>
<p> Really long line of text that didn't fit in box </p>
</div>
</body>
</html>
This sample html code will automatically wrap around the tag and it should work with iPhone. Feel free to edit code to make it responsive.
I have set up a very simple webpage which works the way I intend on a desktop browser, but shows strange results on mobile. Here is the code :
body {
font-family: "Raleway", "Tahoma", "Helvetica", "Arial", Sans-serif;
line-height: 1.4;
color: #303030;
font-size: 20px;
}
a,
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
#container {
width: 900px;
margin: 30px auto 0px auto;
}
#links .name {
display: inline-block;
font-size: inherit;
width: 90px;
}
#links .link {
display: inline-block;
font-size: inherit;
}
.box {
background-color: rgba(255, 255, 255, 1);
padding: 20px 20px;
margin: 20px 0px;
box-shadow: 0 1px 1px #D0D0D0;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<section class="box">
Hi ! My name is <strong>Name</strong>. You might also know me as <strong>User</strong>. Bla bla bla, this is some text here. But not too much.
</section>
<section class="box">
My main interests are <strong>hobby 1</strong>, <strong>hobby 2</strong>.
</section>
<section class="box">
Reach me easily on Twitter !
<br>
<br> You can also find me on
<ul id="links">
<li>
<div class="name">Twitter</div>
<div class="link">#Username</div>
</li>
<li>
<div class="name">Facebook</div>
<div class="link">Username</div>
</li>
<li>
<div class="name">Google+</div>
<div class="link">+Username</div>
</li>
</ul>
</section>
</div>
</body>
</html>
It works perfectly and displays things the way I want when viewed in a dekstop browser :
However, when I view the page from a mobile device, the size of the text of <li> elements get reduced compared to the rest of the page. Here is how it looks :
I have no idea why this happens. Looking at it through the dev tools, it seems like the font-size of the first two <section> elements goes up when on mobile (I've set it to 20px in body, but they go way higher in reality :
).
The thing I don't understand is then why doesn't this also happen on the <li> elements ? I could use
<meta name="viewport" content="width=device-width, initial-scale=1">
but then the page would look ugly on phone, which is not what I'm looking for. I just want the text to be the same size on the page.
It seems like the display: inline-block is what causes this, but can't find an other way to achieve aligning the <a> elements vertically only using inline elements.
Solution:
Just turn
#container {
width: 900px;
}
into
#container {
max-width: 900px;
}
and also apply
<meta name="viewport" content="width=device-width, initial-scale=1" />
in the <head>-section of your html. Check here, I've set it up on my own server (to stay there) for your reference. Find the css here.
What happens here:
Since your #container did have a fixed width: 900px your mobile browser automatically scales it down to fit the viewport width. Since browsers do this in an intelligent way, they do increase the font-size of elements to match the intended font-size of elements (which is why you saw much bigger font-size in calculated styles than in the stylesheet).
For some strange reason I cannot explain the browser does not seem to do this for all elements, though.
I faced very similar issue while developing a responsive app whose font should look same in tablet browser and desktop browser (Chrome here)
So, what fixed for me is using flex or inline-block for display
#container {
display: flex; \* or display:inline-block *\
}
I am not sure why it works but this works great
I have a button , well .. actually a <li> acting as one. I shape it with the padding without giving it any height. For a click effect, I set font increase +1 on active. Now, on Firefox it expands the button, which is not what I want. On Chromium it does it right and keeps the button size constant while increasing the font size. I can fix this with setting the buttons height - no problem. Although it is not ideal.
But I am just wondering what is the correct behaviour? Should the font size expand the button or should it not?
I assumed that with IE out of the way, two compliant browsers should agree on how to render stuff in common scenarios.
Thanks.
UPDATE
I do apologise for not including the CSS. I thought the wording is simple enough. Here is the sample ...
<!DOCTYPE html>
<html>
<head>
<title>Basal</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="base2.css">
</head>
<body>
<nav>
<ul>
<li> Create </li>
<li> Read </li>
<li> Update </li>
<li> Delete </li>
</ul>
</nav>
</body>
</html>
And the CSS ...
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
nav ul {
display: flex;
border: 2px solid #232B2B;
border-radius: 5px;
}
nav ul li {
flex: 1;
display: inline-block;
border-right: 2px solid #232B2B;
text-align: center;
padding: 5px 0;
cursor: pointer;
background: #685642;
font-size: 16px;
}
nav ul li:last-child {
border-right: 0;
}
nav ul li:hover {
background: #74695C;
}
nav ul li:active {
font-size: 18px;
}
In Firefox, It expands the <li> container every time I click it. In Chromium - it does not. In Chromium it just increases the font size keeping the container size constant.
Firefox - 28.0
Chromium - 34.0.1847.116 (260972)
The height of an element generally depends on the height requirements of its content. The details have intentionally been left browser-dependent in CSS specifications. Increasing font size may or may not increase the height requirements; typically, an increase of 1px does not, an increase of 2px does.
For the given code, both Firefox and Chrome (34.0.1847.131, Win 7) increase the height of the li element when it is activated. The difference is that on Chrome, the increased height remains even when the element returns from active state to normal state. This is probably unintentional and might be classified as a bug. (The effect can perhaps be seen better if you add :active { background: red }.)
In general, you should not expect different browsers to assign the same height to an element unless you explicitly set the height.
If you're increasing the font size, it would make sense that when the font gets large enough, the "li" container will also have to increase its size to keep it contained.
I test your question in chrome, and it does the same as it in Firefox.When you set font increase +1 on active, you must set the active button's attribute "padding-top" or "padding-bottom" decrease the same size.
Browser calculate button's height as follows:
height=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
You can search CSS box model to see more detail.
When measurements are specified in cm or inches for an element, it is printed at exactly that size from Firefox and Internet Explorer. Chrome on the other hand makes the elements bigger.
Is there anyway to make Chrome print things at exactly the specified size, or is it something I'll just have to live with?
E.g.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
The above code prints an exact 5cm (on my printer) in both Firefox and IE, but prints at about 5.5cm from Chrome.
I have found this issue too.
After playing with MANY wasted sheets of paper, I've found that Chrome tries to scale the HTML.
For example, add a full width div to your sample below and it'll resize the box correctly, because you're asking Chrome to make the box 100% of the page and thus forcing a 1:1 scale of the page.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 100%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
Unfortunately, when I tried this, it didn't fix the height issue, but also I couldn't make the box 0px without it losing correct scaling.
Incidentally, take a look at the following to show how it affects the sizes when printed.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 200%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
In a nutshell: Chrome's printing capabilities are shocking!
Firefox works far better for printing, but runs much slower.
The solution with a 100% wide div doesn't work for me on the current Chrome version, but this works, for an A4 paper:
html, body {
width: 210mm;
}
For Chrome, just set the print margins to something, and set the body to the width of the paper, minus the margins.
E.g. For an A4 page, the width is 210mm
So for 1 inch margins (roughly 2.5cm) you can do the following
#media print
{
#page
{
margin-left: 25mm;
margin-right: 25mm;
}
body
{
width: 160mm;
}
}
The left, right, and width of the body should add up to 210mm.
For letter you'd use 1 inch margins, and a 6.5 inch width on the body.
I confirmed that I had the same issue when using your HTML, even when trying to specify some CSS rules to get rid of obvious suspects like padding and margins. From the research I've done, it looks like you're simply dealing with inconsistent browser standards when rendering media queries. If possible, I would recommend conditionally styling the box based on browser.
One other aspect seems to be that not specifying a Doctype (which is a bit of a no-no in development anyway) can lead to inconsistencies.
You can go ahead and see this topic for some more reading about the issue:
Firefox versus webkit measurements for media queries based on width