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:
Related
I am creating a personal website in html and am trying to add a background image to the "index.html" page. I have pasted my the index.html and style.css code below:
HTML File:
<!DOCTYPE html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital#0;1&display=swap" rel="stylesheet">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Jack Hanel</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Gallery
Education
<h1>Hello, I'm Jack Hanel</h1>
<img src="Photos/headshot.jpeg" height="257" width="207">
<p>Age: {age}</p>
<p>Date of Birth: 08/30/1998</p>
<p>Gender: Male</p>
<p>Height: 5'10"</p>
<p>Weight: 165 lbs</p>
<p>Born: Phoenix, AZ</p>
<p>Raised: Greenville, SC</p>
<p>Current Location: Charlotte, NC</p>
LinkedIn
Twitter
Instagram
Replit
</body>
</html>
CSS File:
<style>
body {
background-image: url(Photos/AbstractWallpaper.png);
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 28px;
}
a {
font-family: 'EB Garamond', serif;
background-color: lightgrey;
padding: 4px
}
p {
font-family: 'EB Garamond', serif;
font-size: 18px;
background-color: lightgrey;
padding: 4px
}
img {
margin: 4px
}
</style>
I've added the same background-image code line to the h1 tag, and it applies, although only showing the very top of the image. So I know the background-image code itself isn't the problem. Please help! Also, any other general advice is appreciated, I am brand new to HTML and CSS.
Thank You
I've tried adding the background-image element to the h1 tag, and it worked, although it only showed the very top of the image. But when I apply this line of code to the body tag, nothing appears.
Find the image here to understand what i'm talking about
Been googling and fiddling around but I can't seem to seperate the words. The only separation I managed was using "justify-content: space-around".
Here's the HTML. And the CSS is below it
body {
background-color: #3269a8;
}
.header-container {
display: flex;
width: 100%;
height: 50px;
background-color: #282828;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.logo {
color: white;
font-family: 'Titillium Web', sans-serif;
font-size: 25px;
}
.logo:hover p {
transition: 2000ms;
font-size: 30px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Top 3 Anime</title>
</head>
<body>
<div class="header-container">
<p class="logo-the logo">The</p> <p class="logo-big logo">Big</p> <p class="logo-three logo">Three</p>
</div>
<div class="top3">
<div class="onepiece">One Piece</div>
<div class="dragonball">Dragon Ball Z</div>
<div class="naruto">Naruto</div>
</div>
</body>
</html>
You have used display:flex in your header-container with justify-content:center; that will make the child p tags to be in a line without any space. if you just want little space around p tags you can add
.header-container p {
padding: 0 5px;
}
and if you want to learn about flex and its properties you can learn from here csstricks , the have explained it beautifully.
I hope this will work for you
Thanks
You can change the <p>Your header</p> to <pre>Your Header</pre>. Here <pre> keeps the format of the text including spaces. You can check this page: https://www.w3schools.com/tags/tag_pre.asp
Basically you just need to editted the following in your code:
<pre class="logo-the logo">The </pre> <pre class="logo-big logo">Big </pre> <p class="logo-three logo">Three</p>
I added a space after "The" and "Big" so converted them to <pre>.
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.
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 am testing some css and have found that the browsers (Chrome, firefox) will not show the ::after content I am specifying. Fiddler show is correctly, but the browser will not.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/test.css">
</head>
<body>
<div id="testdiv">
<main>
<section>
<p>
I want to put number '123' here:
</p>
<p>
And I want it here too:
</p>
</section>
</main>
</div>
</body>
</html>
CSS:
#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;}
#testdiv main p::after { content:'123'; }
Fiddle: (shows correct)
https://jsfiddle.net/bg1tg8nc/
Any help appreciated.
HA I figured out how to fix the issue!
If you take the above CSS code and reorder it like this:
#testdiv main p::after { content:'123'; }
#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;}
it works fine.
Can anyone explain why?