Need help Html/CSS

Get Help CSS
#1

Hi people,

I`m currently working on creating a website with HTML & CSS.
The intention is that an image will come as the entire background.

The image does contain text, but here something needs to be added.
When I add the text, it is displayed correctly on the computer. If I open it on a mobile or I resize the browser the text jumps (h2 in html). I’ve been doing this for a long time !

The text must be placed between 2 lines of text that are standard on the image.
I want this to work for all resolutions. Is that possible at all?

Do you have any tips on how to properly secure the text?
Hereby my code:

<! doctype html>
<html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<head>
<meta charset = "utf-8">
<title> </title>
</head>

<body>

<style>
body
{
text-align: center;
overflow-y: hidden;
overflow-x: hidden;
width: 100%;
margin: 0 car;
padding: 0px;
font family: helvetica;
background color: # 000000;

background: url () no-repeat center center fixed;
background size: 1000px;
width: 1000px;
height: 1000px;
background color: # 000000;
}
#wrapper
{
text-align: center;
margin: 0 car;
padding: 0px;
width: 700px;
}
h1
{
margin top: 225px;
color: white;
font size: 20px;
font weight: bold;
}
h2
{
position: absolute;
top: 58%;
left: 50%;
transform: translate (-50%, -50%);
font size: 16px;
font weight: bold;
color: white
}
</style>


<div class = "container">
<div class = "row">
<div class = "h2">
<h2> CLICK <a href=""> HERE </a> SEE OUR OPENING HOURS AND <br>
 OTHER INFO


</div>
</div>
</div>

</body>
</html>

Regards,
Adrian

1 Like
#2

Hey @adriang001,

Let us look into this. The first thing I notice is that your code is full of syntax errors. Also I noticed css rules that contradict each other.

font weight should be font-weigth , you seem to be missing the - at multiple lines of code.
Also hex colours should be written without the space between the # and 6 digits.

You seem to be having a space between translate and its parameters:

transform: translate (-50%, -50%);

should be

transform: translate(-50%, -50%);

margin: 0 car; should be margin: 0 auto;

Example of contradicting css rules is in the body, where you first state the width to be 100% and then later you say its 1000px wide and 1000px high. With the overflow being hidden, the body will be clipped upon making the browser smaller.

With these mistakes out of the way, go check your code again and see if the website runs as intended.

Kind regards,
Jannes