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
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 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">
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
My father always wanted a website with a seminar chart that consists of circles and lines connecting them as the main navigation to articles on his site. The site will have a header and footer and between, the seminar like chart(kinda like a flow chart but only cirlces). I am not a programmer by would like to do this for my dad. Did some research and found two options. Use images as the circles or use CSS3. Can anyone point me in the right direction. Heres my attempt by hand.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circles</title>
<link rel="stylesheet" href="circle.css">
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="content">
<div class="c1">Hello</div>
<div class="c1">Hello</div>
</div>
<div id="footer">My Footer</div>
</div>
</body>
My CSS:
#wrapper {
background-color: black;
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
}
#header {
height: 8.3%;
width: 100%;
background-color: gray;
text-align: center;
}
#content {
color: green;
}
a.with-style {
display: block;
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
line-height:100px;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #f15;
color: white;
background: blue;
}
a.with-style:hover {
border: 4px double #bbb;
color: #aaa;
text-decoration: none;
background: #e6e6e6;
}
div.c1 { display: inline; }
#footer {
background-color: grey;
text-align: center;
position: absolute;
bottom: 0px;
height: 8.3%;
width: 100%;
}
You could use CSS3 rounded corners as in this article. It's straight forward and is widely supported.
Another option would be to use JQuery and its extension, JQuery UI which achieves the same result but increases the compatibility with older browsers. Unfortunately it would slightly increase load times, and makes things a bit more complicated. Saying that, it's simpler than implementing your own concoction of CSS3 and images as fall-back.
Have you checked Raphael.js? Looks good to me. Also you will get curve lines and much more flexible options.
Circle using Raphael.js http://raphaeljs.com/reference.html#Paper.circle
Here is something I have created using Raphael, not a chart but will give a idea about what you can do.
mostly using
border-radius:50%
always makes the div a circle, however It's not compatible with IE 8 and below. So if your not aiming at those browsers, this method should help, else use images.
The option you take depends on what browser support you want to achieve.
OPTION 1 - with CSS
This option only works in modern browsers:
http://caniuse.com/border-radius
But if you are not concerned about this, I would go with this option.
OPTION 2 - images
With this option you want to create a large circle graphics in a graphics program like photoshop, fireworks, etc. And then scale down that graphic to the sizes that you want. This option is harder and requires more effort.
For circles in CSS, use "border-radius: 50%;". The 50% ensures that no matter what size the div element is, it will always be a circle(or an oval if the height and width are different).
However if you are trying to create a graph of some sought, there are some libraries/plugins that you can utilize.
My favorite is:
http://www.highcharts.com/demo/
This is a really extensive library of charts, which are free for non-commercial sites.