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.]
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).
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,
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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:
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 & horizontally centered container over a full-sized background-image.</p>
</div>
</body>
</html>
Hope that helps.