HTML/CSS Fitting object/everything on any window size/resolution - html

So, my friend and I are working on a mod for a game called Minecraft and I had the duty to make a website where we publish this mod and tell every one what this mod is about.
The problem that I'm currently facing is that I can't get my objects to shrink/grow to fit any browser resolution/window resolution. Currently, I have it so it is formatted to my screen resolution (1920 x 1080) and it seems to be fine, but when I make the window smaller, I have to use the horizontal scrolling bar to get to different areas on the html page.
When I shrink the window, I want it to fit that window.
Same goes with screen monitors. If it isn't my screen resolution, you have to use the horizontal scrolling bar.
How do I make it so my page objects will change size depending on window size/resolution size?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"</meta>
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="MOPM-ico/favicon-144.png">
<meta name="msapplication-config" content="MOPM-ico/browserconfig.xml">
<link rel="shortcut icon" href="MOPM-ico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="MOPM-ico/favicon.ico">
<link rel="icon" type="image/png" sizes="310x310" href="MOPM-ico/favicon-310.png">
<link rel="icon" type="image/png" sizes="196x196" href="MOPM-ico/favicon-196.png">
<link rel="icon" type="image/png" sizes="160x160" href="MOPM-ico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="MOPM-ico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="MOPM-ico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="MOPM-ico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="MOPM-ico/favicon-16.png">
<link rel="apple-touch-icon" sizes="152x152" href="MOPM-ico/favicon-152.png">
<link rel="apple-touch-icon" sizes="144x144" href="MOPM-ico/favicon-144.png">
<link rel="apple-touch-icon" sizes="120x120" href="MOPM-ico/favicon-120.png">
<link rel="apple-touch-icon" sizes="114x114" href="MOPM-ico/favicon-114.png">
<link rel="apple-touch-icon" sizes="76x76" href="MOPM-ico/favicon-76.png">
<link rel="apple-touch-icon" sizes="72x72" href="MOPM-ico/favicon-72.png">
<link rel="apple-touch-icon" href="MOPM-ico/favicon-57.png">
<link type="text/css" rel="stylesheet" href="styles.css" />
<title>
MOPM~
</title>
</head>
<body>
<header>
<!--header-->
<div class="topHead">
<img id="headertxt" src="pictures/header.png" width="1919px" height="120px"/>
</div>
<!--header buttons-->
<div class="headButtonSeperator">
<div class="headButton">home</div>
<div class="headButton">about</div>
<div class="headButton">mod info</div>
<div class="headButton">downloads</div>
<div class="headButton">videos</div>
<div class="headButton">links</div>
<div class="headButton">dev team</div>
</div>
</header>
<!--content-->
<div id="home">
</div>
</body>
</html>
CSS:
body
{
background-image: url('pictures/background.png');
}
/*--Classes--*/
.topHead
{
width: 1919px;
height: 120px;
background-color: #272B30;
float: middle;
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
display: block;
border-bottom: 4px dashed #1EC20B;
}
.headButtonSeperator
{
width: 980px;
height: 40px;
background-color: none;
position: absolute;
top: 125px;
left: 509px;
}
.headButton
{
width: 120px;
height: 10px;
background-color: #313A3D;
margin-left: 5px;
display: inline-block;
float: left;
font-size: 0px;
border-left: 3px solid #282E30;
border-bottom: 3px solid #282E30;
border-bottom-left-radius: 20px;
}
.headButton:hover
{
width: 140px;
height: 35px;
background-color: #313A3D;
margin-left: 10px;
position: relative;
display: inline-block;
color: #DB481B;
font-size: 20px;
text-align: center;
line-height: 35px;
font-family: minecraft;
text-shadow: 2px 2px #7A5E55;
border-left: 3px solid #282E30;
border-bottom: 3px solid #282E30;
border-bottom-left-radius: 20px;
}
/*--ID's--*/
#home
{
display: block;
width: 918px;
height: 1000px;
background-color: white;
position: absolute;
top: 500px;
left: 500px;
float: middle;
z-index: -1;
}
/*--Fonts--*/
#font-face
{
font-family: minecraft;
src: url(fonts/minecraft.ttf);
}
#font-face
{
font-family: McBold;
src: url(fonts/ARCADEPI.ttf);
}
#font-face
{
font-family: McBlock;
src: url(fonts/Square.ttf);
}
#font-face
{
font-family: MccBlock;
src: url(fonts/Squareo.ttf);
}
Edit:
I am not getting any answers and I really want to get this done so I can work on the other aspects of the page.
Do I need to use percentages?
What am I doing wrong that wont make it position according to resolution/window size?
Edit:
So I understand now that I have to make my page responsive by not using px
How exactly do I make it responsive and what measurements can I use?
Edit:
I did a little bit of testing with percentages and it didn't seem to work.
In this picture, i am testing the head banners width with a width: 100%
I made the window smaller and the top wording (which is an image) doesn't
shrink down to the size of the window.
http://prntscr.com/47v2ub <---image
Edit:
Update on the above edit:
I figured out that i had to make >.topHead also have a >width: 100
The problem i am facing now is that if the browser gets too small, all of my buttons bunch up


To make a page responsive you need to keep two things in mind:
Don't use fixed quantities for width and other dimensions on your page (like px).
If you do, control things with Media Queries which let you change the styles on your page according to the changes in the screen size.
See More

Related

Responsive HTML not showing on iPhone but showing in Chrome developer tools and Safari Mobile, yes i have viewport

really new user, hope I'm posting this right.
I'm trying to get responsive HTML to work on my phone, but I'm running into really strange problems. The responsive html on my page doesn't seem to be working. Even stranger, I copied the page and the issues on that page are different, even though the code should be identical.
I am working on
http://www.nokillshelter.net/final.html
http://www.nokillshelter.net/finalfinal.html
Both should be the same code but both are not picking up the responsive CSS properly. I'd post code, but its very long at this point. Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<title>NoKillShelter Music</title>
<meta name="description"
content="NoKillShelter Music">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ================4avicons ================== -->
<!-- Standard -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon-retina-ipad.png">
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon-retina-iphone.png">
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon-standard-ipad.png">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon-standard-iphone.png">
<!-- ============== Resources style ============== -->
<link rel="stylesheet" type="text/css" href="css/style-multi-scrollnew.css"/>
</head>
<body>
<div id="thelist">
<h5>NoKillShelter Releases</h5>
<br><img id="movinglogo" src="/img/LogoNKS-Imma.gif">
<div id="songs">
<a id="Longshot" href="https://awal.lnk.to/vmjynlm">
<span>Longshot</span>
</a>
<br><a id="Sweetheart" href="https://awal.lnk.to/NoKillShelter-Sweetheart"><span>Sweetheart</span>
</a>
<br><a id="FairyQuing" href="https://awal.ffm.to/mxnkqxq">
<span>FairyQuing</span>
</a>
<br><a id="JustSeeTheCoast" href="https://awal.lnk.to/JustSeetheCoast">
<span>Just See The Coast</span>
</a>
<br><a id="BalancedLove" href="https://awal.lnk.to/BalancedLove">
<span>Balanced Love</span></a>
</div>
CSS
/* Small Devices, Tablets #media only screen and (max-width: 768px) */
#media only screen and (max-width: 768px) {
h1 {
font-size: 5.5rem;
}
#thelist {
top: 69px;
font-size: 20px;
}
h5 {
font-size: 2.5rem;
}
#movinglogo {
max-width: 17%;
top: 55px;
left: -5px;
position: absolute;
}
button {
white-space: nowrap
}
.album {
margin-left: 0%;
}
#info .content {
padding: 0 5%;
}
.block-team img.team-member {
width: 100%;
}
}
/* Extra Small Devices, Phones #media only screen and (max-width: 480px) */
#media only screen and (max-width: 480px) {
.album {
margin-left: 0%;
}
h1 {
font-size: 5.5rem;
}
#thelist {
top: 69px;
font-size: 20px;
}
#thelist button {
whitespace: inherit;
button-width: 200px;
font-size: 12px;
}
#movinglogo {
max-width: 17%;
top: 55px;
left: -5px;
position: absolute;
}

How do I change the color of text when scrolling?

I am working on a menu for my HTML class, at school, and I was trying to figure out how I could make it so my h1 and h2 text change to the color white when they reach the top of the page, which with the background image, is dark at the top. Below is my code. The h1 and h2 tags are the only ones I want to have change.
/*
$(document).ready(function() {
$(window).scroll(function() {
var light_pos = $('#white_div').offset().top;
var light_height = $('#white_div').height();
var menu_pos = $('.NavigationButton').offset().top;
var menu_height = $('.NavigationButton').height();
var scroll = $(window).scrollTop();
console.log('light', light_pos);
console.log('menu', menu_pos);
console.log('scroll', scroll);
if (menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
$('.NavigationButton').addClass('menu_black');
$('.NavigationButton').removeClass('menu_white');
} else {
$('.NavigationButton').removeClass('menu_black');
$('.NavigationButton').addClass('menu_white');
}
})
})
*/
h1 {
font-family: 'Caveat', cursive;
margin-bottom: 100px;
border: 4px;
margin: 100px;
padding: 50px;
width: 300px;
}
b {
font-family: 'Nothing You Could Do', cursive;
}
h2 {
font-family: 'Nothing You Could Do', cursive;
font-size: 40px;
}
h3 {
font-family: 'Homemade Apple', cursive;
}
div {
border: 4px solid black;
margin: 100px;
padding: 50px;
width: 300px;
background: rgba(255, 255, 255, 0.3)
}
sup {
font-family: Verderna, Helvetica, sans-serif;
}
.NavigationButton {
position: fixed;
top: 5%;
right: 5%;
z-index: 99999;
font-weight: 700;
color: inherit;
}
.menu_white {
color: #fff;
}
.menu_black {
color: #000;
}
body {
background-image: url('https://bestanimations.com/media/beverages/405618319drink-animated-gif-16.gif');
/*Image sorce*/
background-repeat: no-repeat;
/*If changed to "repeat", image will repeat*/
background-attachment: fixed;
/*Does your image stay in one spot, or does it move as you scroll?*/
background-size: cover;
/*The resolution of the image*/
}
<title>Big Surf Island: Beverages Menu</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<!--Below is all the code for the fonts that I've used. All custom fonts used came from Google Fonts. [fonts.google.com]-->
<link rel="shortcut icon" type="image/png" href="2021_04_06_0fb_Kleki.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
<!--Background image for website -->
<h2 style='color:white'>Pick a drink, any drink!</h2>
<h1>Non-Alchoholic drinks</h1>
<!--1st Menu Item-->
<div>
<h3>Fountain Drinks--------------------1.99</h3>
<b>Choose any of our fountain drink, in any flavor you want!
<img height=132px; width=320px; src="https://img1.mashed.com/img/gallery/why-fountain-drinks-taste-different/intro-1588447053.jpg"></b>
</div>
<!--2nd Menu Item-->
<div>
<h3>Iced Tea, Tea, & Coffee 2.95</h3>
<b>Pick your choice of cold or hot tea, any flavor, or coffee, made just the way you like it.
<img height=140.625px; width=250px; src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F12%2F2020%2F05%2F11%2Fcoffee-tea-GettyImages-930798200.jpg&q=85"></b>
</div>
<!--3rd Menu Item-->
<h1>Drinks only for Mom and Dad<br> (Valid ID must be presented to<br> waitor / waitress to show you<br> are older than 21)</h1>
<div>
<h3>Beer and Wine---------------5.99</h3>
<b>Choose your poison, but don't overdo it.
<!--Look I just copied the image link.-->
<img height=208px; width=282px; src="data:image/jpeg;base64,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"></b>
</div>
<!--Link back to menu homepage-->
</body>
</html>

Aligning an SVG element to the left hand side of page

I've started tooling around with SVG and it is going good.
I am trying working the alignment of the image to the up corner of the left-hand side, however, I just could not make it well. I want to show a quarter of the circle on the front page.
I've set something up by margin, right and top but the effect is not for what I want. The SVG moves a little to the left-hand side of the page only still far away. (image below).
Guys- I am trying hard but if anyone could any resources or support then it would be highly appreciated.
The first image that I attached is what I made, but the second image is what I want to align.
Thank you
.topcon {
background-color: #f6f5f5;
position: relative;
width: 200px;
height:250px;
border: 15px;
padding: 50px;
margin: 150px auto 150px auto;
border-radius: 20px;
}
.top-circle
{
position: absolute;
right: 700px;
top: 40px;
margin: -200px auto -200px autp;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet"href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Profile card component</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
body {
background-color: #00B6C7;
width: 1440px;
}
</style>
</head>
<img class="top-circle"src="images/bg-pattern-top.svg" alt="big circle on top">
<body>
<div class="topcon">
<h1>This is for what I made</h1>
<h1>I want the circle could go up and only show quarter of the circle</h1>
Victor Crest
26
London
80K
Followers
803K
Likes
1.4K
Photos
</body>
</html>
enter image description here
enter image description here

edge is not displaying background color on a:link

https://fivosm.github.io/ tested on ie, firefox, chrome works fine, the a:link's background is red. In edge though the background is not red until I hover over it.
I don't know where to start, my google searches don't show anything related to my problem.
Here is my pastebin link, just in case the formatting is messed up again
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicons/apple-touch-icon-57x57.png" /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicons/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicons/apple-touch-icon-72x72.png" /><link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicons/apple-touch-icon-144x144.png" /><link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicons/apple-touch-icon-60x60.png" /><link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicons/apple-touch-icon-120x120.png" /><link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicons/apple-touch-icon-76x76.png" /><link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicons/apple-touch-icon-152x152.png" /><link rel="icon" type="image/png" href="favicons/favicon-196x196.png" sizes="196x196" /><link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96" /><link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16" /><link rel="icon" type="image/png" href="favicons/favicon-128.png" sizes="128x128" /><meta name="application-name" content=" "/><meta name="msapplication-TileColor" content="#FFFFFF" /><meta name="msapplication-TileImage" content="favicons/mstile-144x144.png" /><meta name="msapplication-square70x70logo" content="favicons/mstile-70x70.png" /><meta name="msapplication-square150x150logo" content="favicons/mstile-150x150.png" /><meta name="msapplication-wide310x150logo" content="favicons/mstile-310x150.png" /><meta name="msapplication-square310x310logo" content="favicons/mstile-310x310.png" />
<meta name="description" content="All of my projects are stored here" />
<title>FivosM Projects</title>
<link rel="stylesheet" href="animate.css">
<style>
body {
backgroundColor = "#f5f5f5";
font-family: sans-serif;
text-align: center;
text-align: center;
-webkit-font-smoothing: antialiased;
}
.background{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
div {
border-radius: 25px;
width: 270px;
height: 370px;
display: inline-block;
white-space: normal;
box-shadow: 0px 0px 6px #828282;
}
h1 {
text-shadow: 2px 2px 10px #d3d3d3;
}
small {
font-size: smaller;
}
.transparent{
background:rgba(255,255,255,0.9);
}
a:link {
background-color: #f44336;
color: white;
padding: 3px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:visited {
background-color: #7b77ff;
color: white;
padding: 3px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active{
background-color: red;
}
a:disabled, a[disabled]{
color: black;
background: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
text-decoration: underline;
}
</style>
</head>
<script type="text/javascript">
function changebackground() {
document.body.style.backgroundColor = "#f5f5f5";
var viewport_w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var viewport_h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var geturl = "url(https://source.unsplash.com/category/nature/" + viewport_w + "x" + viewport_h + ")";
document.body.style.backgroundImage = geturl;
}
</script>
<body class="background" onload="changebackground();">
<div class = "body animated bounceInDown transparent">
<h1>My Projects: </h1>
<h3> Software: </h3>
<p><b>Pinger:</b> Download Github </p>
<h3> Games: </h3>
<p><b>HellBlocks:</b> Itch.io page </p>
<h3> Websites: </h3>
<p><b>This website:</b> <a href="https://fivosm.github.io" target="_blank" > fivosm.github.io </a></p>
<p><small><a href="https://github.com/FivosM" target="_blank"
disabled="true"> Github </a> | <a href="https://fivosm.itch.io/" target="_blank"
disabled="true"> Itch.io </a> </small></p>
</div>
</body>
</html>

Define the background for a. Also you have a:visited style setting the background color to #7b77ff. Remove that if you don't need it for a link button styling.
a{
background-color: #f44336;
...
}
a:visited {
background-color: #7b77ff;
}

On my end, the background of all your buttons work fine (see: they all display with red background) in Chrome, FireFox, and Edge, anyway...
You don't appear to have defined
a {
background-color: #f44336;
}
Instead, you're using :link and :visited
Is it possible that you've already used the link in Edge, and it is using the background-color you have set for :visited? If you'd like for them to not change, remove the background-color within your :visited css

Looks like edge does not like text shadows with more than 4px blur.
Replacing this :
.shadow {
text-shadow: 2px 2px 10px #d3d3d3;
}
With this :
.shadow {
text-shadow: 2px 2px 4px #d3d3d3;
}
Fixed everything.
Thanks.

Links disabled in internet explorer

Seems a very strange problem to me, but the links on this site (www.dartsocialmedia.co.uk/bird) are disabled in internet explorer. It seems to work fine on all the other browsers I've tested. The problem seems to be that internet explorer doesn't recognise them as links.
Any ideas what the problem is?
Edit: also, form inputs are not recognised as such.
Here's the HTML header:
<!DOCTYPE html>
<html>
<head>
<title>bird</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/style.css" rel="stylesheet">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/font-awesome.min.css" rel="stylesheet">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/custom-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/img/favicon.ico">
<meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='admin-bar-css' href='http://www.dartsocialmedia.co.uk/bird/wp-includes/css/admin-bar.min.css?ver=3.5.2' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.dartsocialmedia.co.uk/bird/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.dartsocialmedia.co.uk/bird/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.5.2" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
</head>

It seams that z-index: 999 in your css file at line 5 cause the problem.
I suggest you change your CSS bacause body:before overlap the whole window:
1) Implements the border into the body element, add:
body {
border: 5px solid #dd127b;
width: auto;
margin: 10px;
}
2) Use the body:before to place the top border with fixed position to hide overflow when scrolling:
body:before {
border-bottom: 5px solid #dd127b;
display: block;
content: '';
position: fixed;
top: 0;
left: 10px;
right: 10px;
background: #111;
padding-top: 10px;
z-index: 999;
}
3) Use the body:after to place the bottom border:
body:after {
border-top: 5px solid #dd127b;
display: block;
content: '';
position: fixed;
bottom: 0;
left: 10px;
right: 10px;
background: #111;
padding-bottom: 10px;
z-index: 999;
}