HTML layout messes up when zooming

HTML & CSS
1

Hey guys, I’m creating the base for a website page that I’ll modify later with right images, text, exc…
Until now I’ve found only 1 problem: when I zoom in or out, all the layout messes up. I’ve already tried finding something on the internet, but it didn’t solve my problem. Don’t look at css comments 'cause they’re a bit messed up z.z I didn’t update them after I modified the website.

HTML CODE:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>- PapcornGames</title>
<link href="WIPCSS.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="PapcornGamesHomeEsportPart1">
	<img id="PapcornGamesHomeEsportImage" width="100%" height="50%" src="index/sample.png" align="Center"></img>
	<h2 id="PapcornGamesHomeEsportServiziH2" align="center">SERVIZI</h2>
	<p id="PapcornGamesHomeEsportQualiServiziP" align="center"><font face="verdana">Quali sono i nostri servizi?</font></p>
	<img class="PapcornGamesHomeEsportTorneiImg" width="5%" height="5%" src="index/pap-esport.png"></img>
	<img class="PapcornGamesHomeEsportCoachingImg" width="5%" height="5%" src="index/pap-esport.png"></img>
	<img class="PapcornGamesHomeEsportDiscordImg" width="5%" height="5%" src="index/pap-esport.png"></img>    
	<br><br><br><br><br><br><br>
	<div class="PapcornGamesHomeEsportTorneiScritta">TORNEI</div>
	<div class="PapcornGamesHomeEsportCoachingScritta">COACHING</div>
	<div class="PapcornGamesHomeEsportDiscordScritta">DISCORD</div>
	<br><br><br>
	<div class="PapcornGamesHomeEsportTorneiDescrizione" align="center">Tesserarsi con noi ti permette di partecipare <br> a tutti i tornei organizzati dal nostro portale <br>e non.</div>
	<div class="PapcornGamesHomeEsportCoachingDescrizione" align="center">L’attività dei team sarà monitorata dai coach. <br> Loro saranno in grado di formarvi come <br> singoli e vi insegneranno ad essere una vera <br> squadra.</div>
	<div class="PapcornGamesHomeEsportDiscordDescrizione" align="center">Ogni team ha diritto a una stanza personale <br>privata sul nostro server vocale.</div>
	<br><br><br><br><br><br><br><br><br><br><br><br>
	<img class="PapcornGamesHomeEsportTeamBuildingImg" width="5%" height="5%" src="index/pap-esport.png"></img>
	<img class="PapcornGamesHomeEsportStreamingImg" width="5%" height="5%" src="index/pap-esport.png"></img>
	<img class="PapcornGamesHomeEsportPacchettoGraficoImg" width="5%" height="5%" src="index/pap-esport.png"></img>
	<br><br><br><br><br><br><br>
	<div class="PapcornGamesHomeEsportTeamBuildingScritta">TEAM BUILDING</div>
	<div class="PapcornGamesHomeEsportStreamingScritta">STREAMING</div>
	<div class="PapcornGamesHomeEsportPacchettoGraficoScritta">PACCHETTO GRAFICO</div>
	<br><br><br>
	<div class="PapcornGamesHomeEsportTeamBuildingDescrizione" align="center">Se stai cercando un Team ti aiuteremo a <br>formare un team adeguato alle tua abilità e <br> necessità.</div>
	<div class="PapcornGamesHomeEsportStreamingDescrizione" align="center">Ti offriamo la possibilità di usufruire della <br> nostra piattaforma di streaming e hostandoti <br> sul nostro canale ufficiale.</div>
	<div class="PapcornGamesHomeEsportPacchettoGraficoDescrizione" align="center">I nostri grafici realizzeranno grafiche <br> personalizzate per i tuoi social: Facebook, <br> Youtube e Twitch.</div>
	<br><br><br><br><br><br><br>
	</div>
	<div class="PapcornGamesHomeEsportPart2">
	<br><br><br><br><br><br><br>
	</div>

</body>
</html>

CSS CODE:

/* P Modifies */

div.PapcornGamesHomeEsportTorneiDescrizione{
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportCoachingDescrizione{
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportDiscordDescrizione{
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportTeamBuildingDescrizione{
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportStreamingDescrizione{
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportPacchettoGraficoDescrizione{
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}



/* DIV Modifies */

div.PapcornGamesHomeEsportPart1{
	background-color:#EBEBEB;
	padding-left: 0px;
}
div.PapcornGamesHomeEsportTorneiScritta{
	display: inline-block;
	padding-left: 18%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportCoachingScritta{
	display: inline-block;
	padding-left: 23%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportDiscordScritta{
	display: inline-block;
	padding-left: 22%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportTeamBuildingScritta{
	display: inline-block;
	padding-left: 15%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportStreamingScritta{
	display: inline-block;
	padding-left: 20%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportPacchettoGraficoScritta{
	display: inline-block;
	padding-left: 17%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}


/* IMG Modifies */

img.PapcornGamesHomeEsportTorneiImg{
	margin: auto;
	padding-left: 18%;
}
img.PapcornGamesHomeEsportCoachingImg{
	margin: auto;
	padding-left: 24%;
}
img.PapcornGamesHomeEsportDiscordImg{
	margin: auto;
    padding-left: 24%;	
}
img.PapcornGamesHomeEsportTeamBuildingImg{
	margin: auto;;
	padding-left: 18%;
}
img.PapcornGamesHomeEsportStreamingImg{
	margin: auto;
	padding-left: 24%;
}
img.PapcornGamesHomeEsportPacchettoGraficoImg{
	margin: auto;
	padding-left: 24%;
}
2

It looks like you’ve quoted the code by mistake, rather than use the code mark up. Can delete what you’ve put in your post above, then paste it in again, highlight it, then click the </> symbol on the toolbar. That way you’ll get the code formatted correctly.

2 Likes
3

OK that’s the code formatted in the post.
Now what to do with the code.
The first thing you need is valid HTML, you can check for that and learn what is wrong with you code by checking it with the on-line Validator.
I can see plenty of errors just by scanning it with my eyes.

Once the HTML is in order, we can tackle the CSS which could do with a lot of pruning. Though I would probably start again with a different approach.

3 Likes
5

Trying with it, thanks! :smiley:

EDIT: I fixed every error except the width and height. I remember that using the % is better than the pixels 'cause it fixes on every screen based on which resolution it has, am I wrong? By the way I still have the problem, is it for the images attributes in % instead of pixels?
I’m updating the code in the main message.

EDIT 2: I’m dumb and I can’t update the main message, so I’m posting it there:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>- PapcornGames</title>
<link href="WIPCSS.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="PapcornGamesHomeEsportPart1">
	<img alt="PapcornGamesHomeEsportImage" class="PapcornGamesHomeEsportImage" width="100%" height="50%" src="index/sample.png">
	<h2 class="PapcornGamesHomeEsportServiziH2">SERVIZI</h2>
	<p class="PapcornGamesHomeEsportQualiServiziP">Quali sono i nostri servizi?</p>
	<br><br><br>
	<img alt="PapcornGamesHomeEsportTorneiImg" class="PapcornGamesHomeEsportTorneiImg" width="5%" height="5%" src="index/pap-esport.png">
	<img  alt="PapcornGamesHomeEsportCoachingImg" class="PapcornGamesHomeEsportCoachingImg" width="5%" height="5%" src="index/pap-esport.png">
	<img alt="PapcornGamesHomeEsportDiscordImg" class="PapcornGamesHomeEsportDiscordImg" width="5%" height="5%" src="index/pap-esport.png">   
	<br><br><br><br><br><br><br>
	<div class="PapcornGamesHomeEsportTorneiScritta">TORNEI</div>
	<div class="PapcornGamesHomeEsportCoachingScritta">COACHING</div>
	<div class="PapcornGamesHomeEsportDiscordScritta">DISCORD</div>
	<br><br><br>
	<div class="PapcornGamesHomeEsportTorneiDescrizione">Tesserarsi con noi ti permette di partecipare <br> a tutti i tornei organizzati dal nostro portale <br>e non.</div>
	<div class="PapcornGamesHomeEsportCoachingDescrizione">L’attività dei team sarà monitorata dai coach. <br> Loro saranno in grado di formarvi come <br> singoli e vi insegneranno ad essere una vera <br> squadra.</div>
	<div class="PapcornGamesHomeEsportDiscordDescrizione">Ogni team ha diritto a una stanza personale <br>privata sul nostro server vocale.</div>
	<br><br><br><br><br><br><br><br><br><br><br><br>
	<img alt="PapcornGamesHomeEsportTeamBuildingImg" class="PapcornGamesHomeEsportTeamBuildingImg" width="5%" height="5%" src="index/pap-esport.png">
	<img alt="PapcornGamesHomeEsportStreamingImg" class="PapcornGamesHomeEsportStreamingImg" width="5%" height="5%" src="index/pap-esport.png">
	<img alt="PapcornGamesHomeEsportPacchettoGraficoImg" class="PapcornGamesHomeEsportPacchettoGraficoImg" width="5%" height="5%" src="index/pap-esport.png">
	<br><br><br><br><br><br><br>
	<div class="PapcornGamesHomeEsportTeamBuildingScritta">TEAM BUILDING</div>
	<div class="PapcornGamesHomeEsportStreamingScritta">STREAMING</div>
	<div class="PapcornGamesHomeEsportPacchettoGraficoScritta">PACCHETTO GRAFICO</div>
	<br><br><br>
	<div class="PapcornGamesHomeEsportTeamBuildingDescrizione">Se stai cercando un team ti aiuteremo a <br>formare un team adeguato alle tua abilità e <br> necessità.</div>
	<div class="PapcornGamesHomeEsportStreamingDescrizione">Ti offriamo la possibilità di usufruire della <br> nostra piattaforma di streaming e hostandoti <br> sul nostro canale ufficiale.</div>
	<div class="PapcornGamesHomeEsportPacchettoGraficoDescrizione">I nostri grafici realizzeranno grafiche <br> personalizzate per i tuoi social: Facebook, <br> Youtube e Twitch.</div>
	<br><br><br><br><br><br><br>
	</div>
	<div class="PapcornGamesHomeEsportPart2">
	<br><br><br><br><br><br><br>
	</div>

</body>
</html>

/* P Modifies */

p.PapcornGamesHomeEsportQualiServiziP{
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

/* H2 Modifies */

h2.PapcornGamesHomeEsportServiziH2{
	text-align: center;
}

/* DIV Modifies */

div.PapcornGamesHomeEsportTorneiDescrizione{
	text-align: center;
	float:left;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportCoachingDescrizione{
	text-align: center;
	float:left;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportDiscordDescrizione{
	text-align: center;
	float:left;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportTeamBuildingDescrizione{
	text-align: center;
	float:left;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportStreamingDescrizione{
	text-align: center;
	float:left;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportPacchettoGraficoDescrizione{
	text-align: center;
	float:left;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportPart1{
	background-color:#EBEBEB;
	padding-left: 0px;
}
div.PapcornGamesHomeEsportTorneiScritta{
	display: inline-block;
	padding-left: 18%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportCoachingScritta{
	display: inline-block;
	padding-left: 23%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportDiscordScritta{
	display: inline-block;
	padding-left: 22%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportTeamBuildingScritta{
	display: inline-block;
	padding-left: 15%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportStreamingScritta{
	display: inline-block;
	padding-left: 20%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
div.PapcornGamesHomeEsportPacchettoGraficoScritta{
	display: inline-block;
	padding-left: 17%;
	font-size: 180%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}


/* IMG Modifies */

img.PapcornGamesHomeEsportTorneiImg{
	margin: auto;
	padding-left: 18%;
}
img.PapcornGamesHomeEsportCoachingImg{
	margin: auto;
	padding-left: 24%;
}
img.PapcornGamesHomeEsportDiscordImg{
	margin: auto;
    padding-left: 24%;	
}
img.PapcornGamesHomeEsportTeamBuildingImg{
	margin: auto;;
	padding-left: 18%;
}
img.PapcornGamesHomeEsportStreamingImg{
	margin: auto;
	padding-left: 24%;
}
img.PapcornGamesHomeEsportPacchettoGraficoImg{
	margin: auto;
	padding-left: 24%;
}
6

First of all, well done fixing those validation errors.
Now there is just those precents on the images.

The width and height attributes only take pixel values, therefore you don’t state any unit, just a number as pixels are taken as a given.
If you want to use any other unit like % or em to size your <img> then you must use CSS to do it. Though it’s still a good idea to have those attributes with pixel values to define the images natural size on the page.

Getting to the actual problem: where to start? There is a lot wrong with how you structure your HTML and how you have structured the CSS too.
One thing missing for a responsive page is the viewport meta-tag in the <head> section.

<meta name=viewport content="width=device-width, initial-scale=1">

On to the structure of the HTML. Look at the order and nesting of the content in the dom.

	<div class="PapcornGamesHomeEsportTorneiScritta">TORNEI</div>
	<div class="PapcornGamesHomeEsportCoachingScritta">COACHING</div>
	<div class="PapcornGamesHomeEsportDiscordScritta">DISCORD</div>

You have three consecutive, what I believe to be section headings.
Then followed by the text for those three sections.
So in the HTML things don’t follow a natural order.
I guess you did this to try and force the layout, but the thing is, you only make things harder for yourself by corrupting the order and structure.
Each section should be grouped with its heading and text together or you will be forever trying various tricks to make them stick together when you created them as separated entities.
Also consider semantics, <div> is not the only container element, use headings, paragraphs, even sections if you like.
And this, never do this:-

<br><br><br><br><br><br><br><br><br><br><br><br>

That’s what margins and padding (CSS) is for.

Not got to the css yet, that will have to follow having a proper html structure.
To be continued…

3 Likes
7

IJust to add to what @sama74 has said, have you a clear idea of how you want things to look at different sizes; start with a mobile phone layout and desktop first - you can worry about a tablet layout later.

You can do the layout as a simple wireframe created with pencil and paper to start with. If you could draw those then upload photos of them here, we’ll know what you’re aiming at creating. You’d just need to ensure it’s clear you have the same elements on both desktop/mobile drawing, so we understand where they are positioned on each layout.

Something as crude as this will do, so long as we understand what the elements in your layout are.

2048×1536 570 KB

3 Likes
8

This is a rough mock-up of what I think you want.

It’s probably not exactly what you want, but my interpretation based on what I saw.
Of course it can be tweaked to get the layout just right.

Things to note: The lack of big long class names. Not putting a class on every element. Not styling every element individually, but styling all similar elements with the same rules. Much less, but more effective CSS. Lack of repetition in the CSS. Much less HTML mark-up. The HTML content follows a logical order and structured on logical nested groups. Not forcing line breaks, but letting text flow and wrap naturally as available space permits. Very responsive, squeeze the browser window up or down, zoom in or out, increase browser font size, it should not break.

I’m guessing you don’t really want the images all small and squishy like that, I was just going on your 5% x5% until you say what you really want then to look like.

2 Likes
9

It looks like all of these are headings. You should use standard heading hierarchy of h1, h2, h3, etc. So all of the above would be written like:
<h1>TORNEI</h1>

… and …

h1 {
	display: inline-block;
	padding-left: 12%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
1 Like
10

Thanks to everyone. By the way I did this 'cause I forgot pretty much all my HTML skills, that were already low while studying Javascrpt and same for CSS. I tried a fast thing trying to reach what I aimed. Obviously as we can all see it sucks, so, I gotta improve the site and my skills. First of all, thanks for the advices and the help again, I really appreciate it. Then, the long names are so long because I wanted them to be free for sure on my final page (considering it’s to be put on a Wordpress page with a free theme downloaded from the internet), though I can modify them with no problem. About the drawing, I’ll do it asap and post it editing this message, just need some time to draw it. Meanwhile I’ll keep trying following your advices!

EDIT: I finished the drawing. As I already wrote before, I’ll try to rewrite it from 0 and make it clean, hopefully z.z .I hope the image is understandable. And yes, I started writing what was written but then I tought writing text1-2-3 was faster C:

EDIT 2: Will the image mess up with the size put in px based on the monitor resolution?

898×1004 165 KB

1 Like
11

You don’t want to use px measurements if you want to make it resize across a wide variety of screen sizes. I’m afraid you’ll need to learn Responsive Web Design skills. Here are a few basics: https://www.w3schools.com/html/html_responsive.asp

1 Like
12

I guess I’ll start studying HTML and CSS seriously so. I was missing that one :stuck_out_tongue: just had a really basic level of them even if I tought they were enough D: . Ty everyone! I don’t know if there’s a way to ‘close’ the post before the 3 months.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.