I want to make this code good for all devices. If I open it with like a smartphone, it looks very bad.
If you can tell me something to improve too, I would appreciate it!
Here is my index and stylesheet.
Thanks!
index.html:
.background {
width: 99%;
height: 100%;
}
.title {
margin-top: 9%;
color: white;
font-family: "Lucida Console", "Courier New", monospace;
}
.subtitle {
margin-top: 1%;
color: #9c9c9c;
font-family: "Lucida Console", "Courier New", monospace;
}
.socials {
bottom: 0;
}
.fa {
padding: 20px;
font-size: 30px;
width: 1%;
height: 2%;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
float: left;
clear: both;
}
.fa-telegram {
background: #34abdf;
color: white;
float: left;
clear: both;
}
.github {
margin-right: 55px;
}
<!DOCTYPE html>
<html>
<head>
<title>zDoctor_ | Developer</title>
<meta name="keywords" content="Minecraft, zDoctor, zDoctor_, Telegram, Github, Doctor, doctor">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body style="background-color: #262a2e" class="background">
<div class="title"><center><h1>zDoctor_</h1></center></div>
<div class="subtitle"><center><h3>Java & Web Developer(I think)</h3></center></div>
<div class="socials">
</div>
<div class="github">
<center><a class="github-button" href="https://github.com/zDoctor-Dev" data-size="large" aria-label="Follow #zDoctor-Dev on GitHub">Follow #zDoctor-Dev</a></center>
</div>
</body>
</html>
It says there is too much code and I need to add more details, but I don't know what to write ^^' so I'm just typing some random things.
One trick is to make absolutely everything relative to the viewport. That way you at least get a properly responsive site on all window aspect ratios.
Whether or not it looks OK on all sizes is something to be considered once you've done this - for a simple design, for example with lots of stuff just centered, you should not need to go into media queries.
You can't make a circle by having width in % and height in %, they are %s of different things so you won't get the underlying square you need. Think about using vmin for the units here and giving them each say 3vmin and see how it works out.
You can even define your font sizes in terms of vmin and they will adjust along with everything else (though be aware that going very very small wont work on some browsers).
So, if you find yourself using px, stop and reconsider.
Also look up more 'modern' ways of doing things like achieving centering and space filling. e.g. flex. Check that everything you are using is both standard and not deprecated. For example using HTML for formatting such as '<center'> isn't now the thing.
For the future, start thinking mobile first when you do a design - but as I say the design you have shown so far should be fine on a smaller viewport if you head for vmin.
edit your meta tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can't simply improve like this. You have to add a meta tag for view port in HTML like: <meta name="viewport" content="width=device-width, initial-scale=1.0">In CSS you have a feature named media query like
#media screen and (min-width: /*Your size in which you want the thing to change*/930px) {
body {
/*Your command like mine is*/
background-color: black;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The above code will change when the size will be decreased. You have to make one for yourself. This is my tip to use query string.
Related
I was learning CSS variables and doing some basic stuff.
/* Variables names must start with -- */
/* They are accessed with var(--name) */
:root {
--clr: blue;
--bgc: whitesmoke;
}
div{
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
background-color: var(--bgc);
margin: 50px;
}
.hello{
color: var(--clr);
}
.world{
color: var(--clr);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="variables.css">
</head>
<body>
<div class="hello"></div>
<div class="world"></div>
</body>
</html>
When I ran the HTML using live-server in VS code.
I got a third and extra div out of nowhere.
which had the following properties
The extra div (and its inner div) is injected by the live server you are using.
While its inner div has display:none so you don't see it, your CSS has set a height and background color on all divs. This means the outer injected div is visible.
It picks up the background-color: var(--bgc) and the variable --bgc has been set as whitesmoke in root.
You could try running your code just from your browser on your PC and you should see just the Hello and World divs without anything extra being injected.
How to disable page zoom in my code? I mean zooming like this:
Note: I only want it to work in chrome.
Here is the code:
*{
overflow: hidden;
}
.container {
overflow: hidden;
justify-content: center;
align-items: center;
}
.number-ticker {
position:absolute;
overflow: hidden;
top:0px;
left:0px;
color: #D9D9D9;
font-size: 2em;
font-family: Roboto Light;
overflow: hidden;
height: 1.1em;
background-color: transparent;
}
.number-ticker .digit {
overflow: hidden;
float: left;
line-height: 1;
transition: margin-top 0.75s ease-in-out;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number Ticker</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="number-ticker.css">
</head>
<body>
<div class="container">
<div class="number-ticker" data-value="10"></div>
</div>
<script src="number-ticker.js"></script>
</body>
</html>
I have used these in HTML head with no success...
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
and this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But unfortunately, it still zooms... !!! Am I missing something?
I have seen pages that don't zoom at all... So I know there should be a working way ...
I've had this problem before, too, and I think Chrome ignores "user-scalable=no" (at least on desktops).
Check out this answer:
https://stackoverflow.com/a/49371150/12343443
For those who may encounter this annoying problem. you only need to use vh and vw in all of your sizes (fonts, elements, etc...) instead of px and em.... those units do not follow page zoom!
I'm not even sure how to link to show the problem since webpack and React combine all the CSS into one thing.
Here is a codepen of what the site shows: https://codepen.io/livebacteria/pen/bJpRxq
Code:
<html lang="en"><head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style type="text/css">body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
</style><style type="text/css">.App {
text-align: center;
}
.roomContent {
width: 85%;
}
.roomId {
width: 85%;
background-color: darkgray;
top: 0;
float: top;
text-align: center;
overflow: hidden;
}
.messageList {
margin-left: 15%;
}
#sign-in-button {
position: fixed;
left: 0;
bottom: 0;
height: 2%;
width: 5%;
background-color: red;
overflow-x: hidden;
}</style><style type="text/css">#room-list {
left: 0;
height: 100%;
width: 15%;
background-color: #797979;
overflow-x: hidden;
}
#rooms {
background-color: darkgray;
margin: .2em;
border: .2em solid black;
border-radius: .5em;
}
.active {
transition: background-color 0.2s ease-in-out;
background-color: white;
color: black;
}</style><style type="text/css">.message {
background-color: lightgrey;
}
.alter {
background-color: teal;
color: white;
}
ul {
list-style: none;
}
.username {
left: 0;
font-weight: bold
}
.msgContent {
text-align: justify;
}
.timestamp {
right: 100%;
}
li {
display: -webkit-flex;
display: flex;
}</style><script charset="utf-8" src="/main.301d260d2d5d7cc6e354.hot-update.js"></script><script charset="utf-8" src="/main.1b967c31a26f143b4c18.hot-update.js"></script><script charset="utf-8" src="/main.71fa75690276c3793425.hot-update.js"></script><script charset="utf-8" src="/main.bd4f9c2dd0d0d73a5767.hot-update.js"></script><script charset="utf-8" src="/main.674bf126f112209cc501.hot-update.js"></script><script charset="utf-8" src="/main.d51f6dd5d844ba3b041f.hot-update.js"></script><script charset="utf-8" src="/main.3b7da7fe7854caba082b.hot-update.js"></script><script charset="utf-8" src="/main.83cd193b84cfa377dad0.hot-update.js"></script><script charset="utf-8" src="/main.2a3407b574c86757e486.hot-update.js"></script><script charset="utf-8" src="/main.593394f8893e7c304918.hot-update.js"></script><script charset="utf-8" src="/main.ca86c32b9f61b8f0bb0b.hot-update.js"></script><script charset="utf-8" src="/main.8bbf712997dd0b0cc98c.hot-update.js"></script><script charset="utf-8" src="/main.8dc8d68395e79c2c6dbd.hot-update.js"></script><script charset="utf-8" src="/main.8f1d3411148d4555e4db.hot-update.js"></script><script charset="utf-8" src="/main.03f056389193af93776c.hot-update.js"></script><script charset="utf-8" src="/main.9cac50b16b883a71fef4.hot-update.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><div class="App"><div class="roomListInfo"><div id="room-list"><section id="informationalHeader"><div><h1>Bloc Chat</h1></div></section><section id="rooms"><div><div class="active">room_1</div><div class="">room_2</div><div class="">room_3</div><div class="">Additional Information</div><div class=""></div><div class="">Mentor chat</div><div class="">retest</div><div class=""></div></div></section><section id="createRooms"><div><form><input type="text" id="nameEntry" value=""><input type="submit" disabled="" value="Create Room"></form></div></section></div></div><div class="roomContent"><h1 class="roomId">room_1</h1><div class="messageList"><div><div><ul><li class="username">LiveBactera</li><li class="msgContent">Testing</li><li class="timestamp">No Data</li></ul></div></div></div></div><div class="userInfo"><div><div><button>Sign Out</button><p>Tyler Poore</p></div></div></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.937734484660ad27272f.hot-update.js"></script>
</body></html>
But, my problem is that I'm trying to build a chat application / website that you know, looks like one. Perhaps like Slack of all things. I'm having major overlapping issues with different components. I want a top header bar to stay stuck to the top, a nav bar on the left side that is stuck as well and, finally, the content should be scrollable.
I don't even know where to start for CSS. I've done loads of tutorials but nothing makes sense. There feels like there is more to CSS than there is in JS. The only code that works to achieve the sidebar look I'd like to have is the position: fixed style in CSS. I've read that this can cause major issues with other /fixed/ elements and sure enough it has.
The more I mess with the CSS the worse it gets, I had to restart almost the whole project because it got so bad.
I am guessing you want roomListInfo on the left, and roomContent on the right?
Some quick fixes:
you need them to be side-by-side instead of stacked on top of each other. You could do this by making them both display: inline-block, and make roomListInfo have width: 15% to match the width: 85% on roomContent. It looks like you tried adding it on room-list instead, so you should undo that.
Next, to get roomContent to cling to the top of the "line" (cause both are now on a line, like a line of text) that both elements now exist on, instead of sitting on the bottom of it, add vertical-align: top to it.
There are different ways to solve this problem. CSS can be confusing to start out with but once you get the core concepts down (classes, Id, declarations) then this will become a lot easier.
A good tip is to separate your CSS into it's own file and then load it using
<head>
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE_NAME.css">
</head>
I would definitely start one-by-by with this page. Don't try to do too many things at once and don't get overwhelmed.
Go through each section thoroughly before moving onto the next.
For the sample below I simulated putting the CSS into a different file, I moved it to the CSS Window and removed the Style Tags.
Then I went through and changes some of the HTML and added the appropriate styles based on what I think you are asking for.
This is just one way to solve this problem, it doesn't mean it's the best.
https://codepen.io/anon/pen/ROaZGo
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
I have been banging my head on the table trying to figure out why this happens. I have set up an anchor that has padding on the top, bottom, and left sides. Inside that anchor is two text elements and as the background of the anchor is an image.
Now when I zoom out (not shrinking the viewport) in chrome, everything seems to shrink as expected until I hit 80%. At this point the content continues to shrink but not the padding on the left side! In FireFox it seems to work as expected.
Attached is my code, please any ideas on how to explain this will be appreciated.
html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px}
a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}
.logo {
padding: 10em 10em 0 0;
background: url(../images/some-image.svg) left center no-repeat;
display: inline-block;
vertical-align: bottom;
}
.logo.main {
padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
display: block;
}
.logotype {
font-weight: bold;
white-space: nowrap;
}
.logotype.title {
font-size: 4em;
line-height: 1.1;
color: #646469;
}
.logotype.subtitle {
padding: 0 0 0 0.078em;
font-size: 2.1em;
line-height: 1.1;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Company">
<base href="">
<title>Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
</head>
<body>
<header>
<a class="logo main" href="">
<span class="logotype title">Line 1</span>
<span class="logotype subtitle">Line 2</span>
</a>
</header>
<section>
</section>
<footer></footer>
</body>
</html>
The issue here comes from the difference in pixel representation between browsers. Meaning - Chrome and Firefox might handle some fixed pixel values differently (don't ask me why, its just how the world functions with everything).
Possible solution 1: Try and set the padding values in % so that they can be relative to each other.
Possible solution 2: This thread on CSS Tricks about not breaking the layout when zooming:
Possible solution 3: Check your viewport tags. Use this thread.
Like #DarkxPunk said, the link goes to the far left side on Firefox and somehow does not go to the far left in Chrome.
Issue visualization for further investigation:
Chrome:
Firefox: