• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Website doesn't fill the screen

New Here ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

Hi,

I am nearly new at this

I have a front page of a web site but when I open it in google or safari it does not fill the screen.

How do I make it fill the screen.

 

Many thanks

 

[Moderator Note: Title changed for clarity.]

Views

238

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
community guidelines
Community Expert ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

You need to provide a link to your page in question for us to help troubleshoot your page. While DW will help you edit web pages it will not do all of the coding for you.  This may be something you need to consider whether DW is the right tool for you or whether you need to consider a CMS solution with a template (ie: Wordpress), or a hosted solution (ie: Wix). 

Votes

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
community guidelines
Community Expert ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

Hi @Clive5F96,

How long is a piece of string?

Full screen on an ultra 4 or 5K monitor is not the same as a smartphone or tablet.  Please be more specific. 

And post a URL to your site so we can see what you're working with.

 

Thank you,

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

Hi

Thanks for getting back to me.
I have not got to the point of url's to allow people to view as I'm still at the building stage.
I understand all devices have different size screens but I have opened tons of sites on different size sreens but the same site opened of different size screens all open to full screen size.
I used DW a few years ago, so a different version so I am tying to teach my self stuff to keep my brain working.

Many thanks

Clive

Votes

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
community guidelines
Community Expert ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

Without knowing what you're working with, it's pretty difficult to say why it's not working as expected.

If you can't post your page to a test location on a server you control, a distant second would be to copy and paste the entire code of the page in a reply in the forum.

Don't send code via email reply, it won't come through.

Votes

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
community guidelines
Community Expert ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

LATEST

To build websites, you need a working knowledge of HTML, CSS and to some extent JavaScript code. Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

To achieve full screen width, you need a parent container width of 100%. The parent container of ALL parent containers is your <body> selector.

 

EXAMPLE:

image.png

CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - Vertical Centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
width:100%;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
.container {
padding: 2%;
width: 75%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
}
/* Special Rules for Tablets & Desktops */
@media only screen and (min-width: 500px){
h1 {font-size:5vw}
h2 {font-size:4vw}
h3 {font-size:3vw}
 p {font-size:2vw}
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Grids!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>I'm a vertically &amp; horizontally centered container over a full-sized background-image.</p>
</div>
</body>
</html>

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines