Highlighted

Not Filling The Total Sceen.

Contributor ,
Sep 07, 2018

Copy link to clipboard

Copied

Good day folks.

First can I say I'm low level with Dreamweaver.

I've put aweb page together that looks not too bad.

However, I have a slight problem I'd like a solution too. I can get my page to fill the screen.

I've searched the internet for solutions which I've tried but without any success.

I get a small amount, about 2px, of white background around my page.

If I use this CSS it works, but causes issues:

{
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw;
}

If I try 100vmin in either body or container it has no effect, other than Expected RBRACE.

Can anyone help?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

By default, all browsers add margins and padding to every HTML element.   The sledgehammer way to remove them is to use an asterisk to reset the defaults  Add this to the top of your CSS code.

/**CSS reset**/

* {margin:0; padding:0}

Views

252

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Not Filling The Total Sceen.

Contributor ,
Sep 07, 2018

Copy link to clipboard

Copied

Good day folks.

First can I say I'm low level with Dreamweaver.

I've put aweb page together that looks not too bad.

However, I have a slight problem I'd like a solution too. I can get my page to fill the screen.

I've searched the internet for solutions which I've tried but without any success.

I get a small amount, about 2px, of white background around my page.

If I use this CSS it works, but causes issues:

{
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw;
}

If I try 100vmin in either body or container it has no effect, other than Expected RBRACE.

Can anyone help?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

By default, all browsers add margins and padding to every HTML element.   The sledgehammer way to remove them is to use an asterisk to reset the defaults  Add this to the top of your CSS code.

/**CSS reset**/

* {margin:0; padding:0}

Views

253

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 07, 2018 0
Adobe Community Professional ,
Sep 07, 2018

Copy link to clipboard

Copied

BigDingus  wrote

If I use this CSS it works, but causes issues:


That translates to "it doesn't work"

Could you post a link to your work in progress? That way we can see with our browsers exactly what you're trying to get working and any other code on the page that might be keeping you from the expected result.

What you have, in your css above, really doesn't have much to do with making anything full screen, other than the 100vw. That setting alone would make an element 100% of the viewport width but wouldn't count anything outside of, and adjacent to, that element. Any "extra" would make scrollbars appear as the page would be 100% viewport width + widths of elements adjacent to the 100vw element.

Seeing everything you have will lead to a correct answer much, much more quickly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Contributor ,
Sep 07, 2018

Copy link to clipboard

Copied

Thanks Jon.

I don't have a link yet as I haven't put it online yet. Hopefully the images will explain it better.

I would like screen_2018-09-07 16.58.41.jpg but have screen_2018-09-07 16.58.07.jpg The first is from a web page I came accross and liked.

The reason I say 'Works', it has the correct affect but scrambles lots of my other settings. ie my return to top button that is position:fixed goes halfway up the page.

The 100vw doesn't fill my screen no matter where I try it. Other than the Expected RBRACE that I mentioned.

My CSS:

.scrolltop {

    position: fixed;

    width: 150px;

    bottom: 120px;

    right: 130px;

    border: none;

    outline: none;

    background-color: transparent;

    color: white;

    cursor: pointer;

    padding: 15px;

    border-radius: 30px;

    font-size: 18px;

If I can post anything else please ask.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Contributor ,
Sep 07, 2018

Copy link to clipboard

Copied

Sorry posted the wrong CSS

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Contributor ,
Sep 07, 2018

Copy link to clipboard

Copied

body {

    font-family: Brush Script MT, cursive; font-size: 40px; font-style: normal; font-variant: normal; font-weight: 700;

}

.container {

    margin-left: 0 auto;

    margin-right: 0 auto;

    background-color: #191717;

  position: relative;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Adobe Community Professional ,
Sep 07, 2018

Copy link to clipboard

Copied

That looks like the browser default <body> tag margin to me, hard to tell.

In the css, you might be able to add margin:0 to your body selector to get that to go away.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Contributor ,
Sep 07, 2018

Copy link to clipboard

Copied

Jon I don't think it's the browser as both images are from the same one.

However, I think your margin:0; is pointing in the correct direction as it worked in Dreamweaver 'Live'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Adobe Community Professional ,
Sep 07, 2018

Copy link to clipboard

Copied

By default, all browsers add margins and padding to every HTML element.   The sledgehammer way to remove them is to use an asterisk to reset the defaults  Add this to the top of your CSS code.

/**CSS reset**/

* {margin:0; padding:0}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 1
Adobe Community Professional ,
Sep 07, 2018

Copy link to clipboard

Copied

Both images are from the same browser, but are they the same site, using the same code?

Browsers add all kinds of default settings to all sorts of elements . One of those default settings is a roughly 10 pixel margin to the <body> that, without resetting it to zero, will keep any content within the <body> content from reaching the edges of the screen (without doing things like using position:absolute and other odd layout settings). A background-color on the <body> will reach the edges though, which is likely what the first screen sliver you posted uses, if the margin isn't reset in the css.

If you'd like to upload the page to a test location on a server you control and post a link to it here, we can find the exact issue pretty quickly. Once the problem is found, just delete the test page.

A distant second option would be to copy and paste the entire code of your page to the forum, including any external css.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 0
Adobe Community Professional ,
Sep 07, 2018

Copy link to clipboard

Copied

Nancy is right, however, once you break out the sledgehammer, you'll need to spend some time gluing a few things back together, like <p> tags that lose the spacing between each other until it's re-added to a p element selector in your css.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 07, 2018 1
Contributor ,
Sep 08, 2018

Copy link to clipboard

Copied

Sorry for the delay Jon, but my wife insisted going out for a meal was more important that fixing this problem. Women eh!!

Anyway, I've put my index file online as you asked. Remeber it's work in progress.

It's on a dynamic address (Sticky) so may change. If it does I'll update.

82.32.249.218

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 08, 2018 0
Contributor ,
Sep 08, 2018

Copy link to clipboard

Copied

Nancy.

I gave {margin:0; padding:0} a go in my CSS body, but no luck in Firefox or Explorer.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 08, 2018 0
Contributor ,
Sep 08, 2018

Copy link to clipboard

Copied

Nancy.

Disregard that. I was being dumb.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 08, 2018 0
Contributor ,
Sep 08, 2018

Copy link to clipboard

Copied

Thanks for the help you've given me. I do appreciate it.

The Margin and Padding did what I was looking for.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 08, 2018 0