Make the page full screen

Hello

Can someone help me?

So … I was configuring my sever and it is small my css look at the image

I wanted to show off with the whole screen, does anyone help me?

my code:

<! DOCTYPE html>
<html> <head> <meta name = "GCD" content = "YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJlc58fdefd395d77c8f49d9d4d40563644" />
  <meta charset = "utf-8">
  <title> undefined </ title>
  <meta name = "generator" content = "Google Web Designer 4.2.0.0802">
  <style type = "text / css" id = "gwd-text-style"> p {
    margin: 0px;
}
h1 {
    margin: 0px;
}
h2 {
    margin: 0px;
}
h3 {
    margin: 0px;
} </ style>
  <style type = "text / css"> html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
}
body {
    background-color: transparent;
    transform: matrix3d ​​(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
    -webkit-transform: matrix3d ​​(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
    -moz-transform: matrix3d ​​(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1);
    perspective: 1400px;
    -webkit-perspective: 1400px;
    -moz-perspective: 1400px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}
.gwd-div-1mjm {
    position: absolute;
    width: 901.987px;
    height: 4.28571px;
    border-color: rgb (4, 4, 5);
    border-image-source: none;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-image: none;
    background-color: rgb (4, 4, 5);
    left: 0px;
    top: 51px;
}
.gwd-div-1ru5 {
    position: absolute;
    width: 92.8571px;
    height: 33.8576px;
    top: 8px;
    left: 786px;
    background-image: none;
    background-color: rgb (0, 255);
    border-image-source: none;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-color: rgb (87, 87, 195);
}
.gwd-div-u86p {
    left: 683px;
}
.gwd-div-ja1a {
    left: 580px;
}
.gwd-p-1i5y {
    position: absolute;
    left: 35px;
    top: 7px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    font-family: Oswald;
    width: 426px;
    height: 28px;
    transform-origin: 213.214px 6.50005px 0px;
    -webkit-transform-origin: 213.214px 6.50005px 0px;
    -moz-transform-origin: 213.214px 6.50005px 0px;
    font-size: 40px;
    transform: translate3d (45px, -7px, 0px) rotateY (1.25deg) rotateX (-20.9901deg);
    -webkit-transform: translate3d (45px, -7px, 0px) rotateY (1.25deg) rotateX (-20.9901deg);
    -moz-transform: translate3d (45px, -7px, 0px) rotateY (1.25deg) rotateX (-20.9901deg);
}
.gwd-img-upso {
    position: absolute;
    top: 56px;
    height: 466px;
    left: 1px;
    width: 901px;
}
.gwd-div-1c3j {
    position: absolute;
    width: 900.982px;
    height: 465.982px;
    left: 1.0115px;
    top: 55.9995px;
    background-image: none;
    background-color: rgb (0, 255);
    opacity: 0.8;
    border-image-source: none;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-color: rgb (255, 0, 43);
}
.gwd-span-1mfk {
    position: absolute;
    font-size: 80px;
    color: rgb (249.0: 0);
    font-weight: bold;
    font-family: Oswald;
    height: 123px;
    transform-origin: 187.857px 75px 0px;
    -webkit-transform-origin: 187.857px 75px 0px;
    -moz-transform-origin: 187.857px 75px 0px;
    width: 364px;
    left: 277px;
    top: 183px;
}
.gwd-span-tcvz {
    position: absolute;
    width: 361.429px;
    height: 137.143px;
    font-family: Oswald;
    font-size: 80px;
    font-weight: bold;
    color: rgb (249.0: 0);
    left: 411px;
    top: 247px;
} </ style>
  <link href = "https://fonts.googleapis.com/css?family=Oswald:200,300,500,600,700,400" rel = "stylesheet" type = "text / css">
</ head>

<body class = "htmlNoPages">
  <div class = "gwd-div-1mjm"> </ div>
  <div class = "gwd-div-1ru5"> </ div>
  <div class = "gwd-div-1ru5 gwd-div-u86p"> </ div>
  <div class = "gwd-div-1ru5 gwd-div-u86p gwd-div-ja1a"> </ div>
  <p class = "gwd-p-1i5y"> THE BEST OF BRAZIL </ p>
  <img src = "dwe.jpg" class = "gwd-img-upso">
  <div class = "gwd-div-1c3j"> </ div> <div class = "gwd-span-1mfk"> SILVER </ span>


</ body> </ html>

Hi there MurilloFagundes,

unfortunately, you code is so riddled with errors
that it really would be impossible for members to
help you with your problem until you gone here…

W3C - Markup Validation Service

…and have fully corrected them. :winky:

coothead

3 Likes

As a hint I already advsed you in your other thread that you were introducing spaces where there shouldn’t be spaces so the first job is to go through and remove all the superfluous spaces.

e.g.

<style type = "text / css">
/* etc. ... */
</ style>

It should be:

<style type="text/css">
/* etc... */

</style>

You have literally hundreds of those mistakes in your short snippet of code.

Once you have tidied that up then we can look at what issues are left :slight_smile:

Also consider using a proper html and css editor as the code looks like it has hidden characters in there. You can’t use things like MS word to prepare html.

It looks like the OP used “Google Web Designer” to make the page, it’s not a tool I’m familiar with, and probably won’t become one.

3 Likes

I’ve long not thought of Google as being attentive to having valid web pages. When they came out with AMP I had some hope that might change, but apparently not. True, the stable version of GWD was released only recently so that might change. eg.

https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fwww.google.com%2Fwebdesigner%2F

“Google does not validate its own pages, therefore GWD will create invalid pages” is non sequitur, but in this case it appears to be true.

MurilloFagundes, I have not installed GWD, but I’m assuming it is yet another tool that has various “design view” features available in a polished GUI, and generates invalid HTML that must be fixed in “code view” if one wants cross-browser pages.

Whether or not the benefits of using “design view” outweigh the disadvantages of needing to fix things in “code view” is something you’ll need to decide for yourself.

In any case, GWD is not a substitute for having an understanding of HTML and CSS. My suggestion is to use GWD to create a simple page, then fix errors until it passes validation. You should then be at a point to have a feeling for whether or not using GWD in design view is something you will want to continue to do. You may decide that writing HTML and CSS “from scratch” in a plain text editor is better, or maybe find that using GWD in code view is better.

Another thing to be aware of is that the design view is not a substitute for testing in actual browsers.

Anyway, tl;dr
The first step in solving your problem is to get rid of validation errors. Until that happens all bets are off as to how any given browser will display the page.

5 Likes

Non-coder

I’ve got this super-duper tool - “Google Web Designer”
to easily make my web pages

Me

I can not comprehend why anyone would want to create
a web page without being able to code HTML and CSS
.

Non-coder

Why do I need to be able to code, when skilled people
have made tools that will do the job for me?

Me

What happens when the tool doesn’t do exactly what
you want or something goes wrong with it?

Non-coder

I simply go to a coding forum and tell the members
there that my page does not work. They will then fall
over themselves in their rush to resolve my problem.
When it is finally resolved another member will click
a " :heart: " button. Everyone will then experience that
comforting warm feeling that comes with success.
Job done, no problem, everyone is happy.

Me

OK, I now understand that my failure to comprehend
is actually caused by my vanity. If I, and others with a
similar disposition, could restrain our vain desires to
show off what we have accumulated over the last
decade or so then tools would loose their appeal.

Non-coder

Your naivety, is beyond belief ! hell will freeze over
before you can possibly achieve humility.

Me

Thank you very much for sorting out my personal problem.
Is there any way that I can now help you with yours ?

1 Like

coothead

4 Likes

Oops, I missed that it was stable version 4.1.0.+ that was recently released. :blush:

Launched October 2013! It seems that would be more than enough time to have worked out bugs by now.

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