Not Filling The Total Sceen.

Report · Sep 07, 2018

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?

Report · Sep 07, 2018

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.

Report · Sep 07, 2018

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 but have 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.

Report · Sep 07, 2018

Sorry posted the wrong CSS

Report · Sep 07, 2018

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;

}

Report · Sep 07, 2018

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.

Report · Sep 07, 2018

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'.

Report · Sep 07, 2018

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— Product User, Community Expert & Moderator

Report · Sep 07, 2018

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.

Report · Sep 07, 2018

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.

Report · Sep 08, 2018

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

Report · Sep 08, 2018

Nancy.

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

Report · Sep 08, 2018

Nancy.

Disregard that. I was being dumb.

Report · Sep 08, 2018

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

The Margin and Padding did what I was looking for.

Not Filling The Total Sceen.

1 Correct answer