Html Question posted in
Some basic documentation can be found here.

Html – How to fit my webpage in the screen and why is it going out of the screen?

I have created a webpage, screenshot of which is attached below.

enter image description here

Here the Footer is shifted to right. There is a clear gap in left and in right it goes beyond the page hiding the letter ‘t’ and partially hiding ‘h’.

The code I wrote is below,

.FullBody {
  background-image: url('BackgroundImage.jpg');
  background-size: 100%;
}

.Heading {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: xx-large;
  align-content: center;
  text-align: center;
  color: azure;
  height: 100px;
}

.Footer {
  height: 40px;
  background-color: black;
  color: white;
  align-content: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  width: 100%;
  position: fixed;
  bottom: 0px;
}

.FooterLeft {
  float: left;
  float: right;
}
<!DOCTYPE html>
<html>

<head style="color: antiquewhite;">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="image_gallery.css">
  <title style="color: blue;">Image Gallery</title>
</head>

<body class="FullBody">
  <div class="Heading">
    Responsive Image Gallery
  </div>


  <footer class="Footer">
    <span class="FooterLeft">Copyright</span>
    <span class="FooterRight">Created - 03/07/2024</span>
  </footer>
</body>

</html>

I am unable to find any mistake or any kind of correction.

Just one more question –
When inside the class .FullBody I did background-size: 50%, the image changed but I don’t think it’s 50% (Just have a look). Suggest if I am missing something. Here it looks to me like 70-80%.

enter image description here

I tried to align things but it won’t work.
I searched and found results related to height but none related to width.

Here is a StackOverflow question on how to fit the webpage exactly the screen size without scrolling?. It also contains links to others (all related to height).

Tags:

2

Answers


  1. 0

    In your case, you have used the position:fixed CSS property, so the footer is set as the bottom only. Use the left:0 property because the in-body tag by default sets margin:8px, so you show the white space on the left side. Remove the body margin or use the left:0 property in the footer.

    Also, you have used the float property to set the right side this is a bad way to use it instead of trying to use the flexbox property to align. I added some code that is helpful to you.

    .FullBody {
    background-image: url('BackgroundImage.jpg');
    background-size: 100%;
    margin:0;
}

.Heading {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    align-content: center;
    text-align: center;
    color: azure;
    height: 100px;
}

.Footer {
    height: 40px;
    background-color: black;
    color: white;
    align-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
    <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="image_gallery.css">
    <title style="color: blue;">Image Gallery</title>
</head>

<body class="FullBody">
    <div class="Heading">
        Responsive Image Gallery
    </div>
    <footer class="Footer">
        <span class="FooterRight">Created - 03/07/2024</span>
        <span class="FooterLeft">Copyright</span>
    </footer>
</body>

</html>
    Login or Signup to reply.
  2. 0

    There are a few ways to achieve this, one of which is the simplest: use a CSS reset, even a very basic one, to remove default margins and padding. Further, don’t use width: 100% on block elements, such as <div>, or <footer> elements; these take up all available space by default, and are constrained by their parents’ padding, but if you explicitly set width: 100%then the elements will take that width, and the parent'spadding` will push them "outside," creating either obscured content or creating a scrollbar for a few pixels.

    Explanatory comments have been added to the snippets below, and references are at the end:

    /* it's almost always a good idea to remove brower-default
   styling in order that you're styling things consistently
   accross browsers; that being the case we're using a
   naive reset to use the same box-sizing for all elements,
   including the ::before and ::after pseudo-elements, and
   setting all padding and margins to 0 (zero): */
   
 *, ::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.FullBody {
  background-image: url('BackgroundImage.jpg');
  background-size: 100%;
}

.Heading {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: xx-large;
  align-content: center;
  text-align: center;
  color: azure;
  height: 100px;
}

.Footer {
  height: 40px;
  background-color: black;
  color: white;
  align-content: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  width: 100%;
  position: fixed;
  bottom: 0px;
}

.FooterLeft {
  float: left;
  float: right;
}
    <!DOCTYPE html>
<html>

<!-- the <head> element doesn't appear in the viewport, and has no visible content,
     setting the 'color' property here doesn't - or shouldn't - serve any purpose,
     so I've commented out your original opening tag, and replaced it with another: -->
<!-- <head style="color: red;"> -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="image_gallery.css">
  <!-- similarly, the <title> element can't be styled as it's under the control
       of the browser and user, see:
        https://stackoverflow.com/questions/62194877/how-to-apply-style-to-the-html-title-element
       -->
  <!-- <title style="color: blue;">Image Gallery</title> -->
  <title>Image Gallery</title>
</head>

<body class="FullBody">
  <div class="Heading">
    Responsive Image Gallery
  </div>

  <footer class="Footer">
    <span class="FooterLeft">Copyright</span>
    <span class="FooterRight">Created - 03/07/2024</span>
  </footer>
</body>

</html>

    While the above addresses the fundamental problem, by removing the default browser styles, it doesn’t address the… "issue" of using float for layout. Floating used to be necessary, due to the lack of coherent layout options, but now there’s both CSS grid and flex layout, either of which could be used.

    So, to demonstrate:

    Flex:

    /* simple reset */
*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.FullBody {
  /* using an image that we can all see: */
  background-image: url(https://picsum.photos/id/200/900/900);
  background-size: 100%;
  /* ensuring that the element(s) take the full size of the viewport,
     though allowing the element to become larger if required; using
     logical properties (see the references): */
  min-block-size: 100vh;
  /* using flex layout: */
  display: flex;
  /* using the shorthand flex-flow, to replace
        flex-direction: column;
        flex-wrap: nowrap;
     this means that the children of the element will be placed on the
     block-axis of the page, and will not wrap to another column: */
  flex-flow: column nowrap;
  /* the following spreads the elements along the main-axis, with an
     equal space between each: */
  justify-content: space-between;
}

.Heading {
  /* using backdrop-filter to apply effects on the backdrop 'behind' the
     element, in order to promote visibility of the text of this element: */
  backdrop-filter: brightness(95%) blur(3px) saturate(20%);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: xx-large;
  align-content: center;
  text-align: center;
  color: azure;
  flex-basis: 100px;
}

.Footer {
  display: flex;
  justify-content: space-between;
  background-color: black;
  color: white;
  flex-basis: 40px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  /* placing the child elements centrally on the cross axis: */
  place-items: center;
}
    <body class="FullBody">
  <div class="Heading">
    Responsive Image Gallery
  </div>

  <footer class="Footer">
    <span class="FooterLeft">Copyright</span>
    <span class="FooterRight">Created - 03/07/2024</span>
  </footer>
</body>

    Grid:

    /* it's almost always a good idea to remove brower-default
   styling in order that you're styling things consistently
   accross browsers; that being the case we're using a
   naive reset to use the same box-sizing for all elements,
   including the ::before and ::after pseudo-elements, and
   setting all padding and margins to 0 (zero): */

*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.FullBody {
  /* using CSS grid display: */
  display: grid;
  /* naming various grid areas,
     in this case we're defining only
     one column, which will take the
     full width of the viewport
     as grid elements are 'block' level
     elements by default, though there
     is also an 'inline-grid' option: */
  grid-template-areas:
    "header"
    "content"
    "footer";
  /* defining three rows by declaring the sizes
     of each row; the 'fr' unit is the fraction
     of remaining space after the explicitly
     sized elements have been laid out (or their
     sizes determined): */
  grid-template-rows: 100px 1fr 40px;
  background-image: url(https://picsum.photos/id/250/900/900);
  background-size: 100%;
  /* again ensuring that the element takes up at
     least all of the available space on the viewport's
     block axis, but allowing it to grow enough to hold
     additional content: */
  min-block-size: 100vh;
}

.Heading {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: xx-large;
  align-content: center;
  text-align: center;
  color: azure;
  /* naming the grid area in which to place the element: */
  grid-area: header;
  /* using backdrop-filter to enhance visibility of the
     element's text: */
  backdrop-filter: blur(2px) invert(15%) opacity(0.3);
}

.Footer {
  background-color: black;
  color: white;
  align-items: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  grid-area: footer;
  display: grid;
  /* this is one way to ensure that columns are placed on the inline axis of
     the element, and sort of emulates CSS flex; for simplicity I'd rather
     use the flex-layout for this element, however I wanted to show a means
     of using grid for the same purpose: */
  grid-auto-flow: column;
}

/* we select the :last-child element of the children of the .Footer,
   and align its text to the end of its inline-axis, the other way
   this could have been done is as above, using named areas on the parent
   and slotting these elements into the relevant area: */
.Footer > :last-child {
  text-align: end;
}
    <body class="FullBody">
  <div class="Heading">
    Responsive Image Gallery
  </div>

  <footer class="Footer">
    <span class="FooterLeft">Copyright</span>
    <span class="FooterRight">Created - 03/07/2024</span>
  </footer>
</body>

    References:

    Bibliography:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search