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

Html – Removing whitespace and moving slideshow up to center of page

I have a slideshow container I wish to host in the middle of the page, next to my navigation bar. Which would eliminate the extra white space. This is only behaving this way on my homepage and not the other pages; so I wish to keep it that way since the other pages are correctly placed.

Edit:
Sorry for not including the code earlier. When I originally attached it, it said it was incorrect. This is my first time using this site, so I apologize for messing up how it works.

Here’s the slideshow’s CSS

{box-sizing: border-box;}

 body {font-family: Times New Roman, sans-serif;}
    .mySlides {display: none;}
    img {vertical-align: middle;}
        
    /* Slideshow container */
    .slideshow-container {
    max-width: fit-content;
    max-height: fit-content;
    position: absolute;
    margin-left: 40px;
    margin-right: auto;}
Tags:

2

Answers


  1. 0

    Link you’ve sent works is local and works only on your computer.

    You probably need to look into css properties such as object-fit and combine it with proper positioning and scaling.

    See this: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit and probably this https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

    Feel free to ask more questions, or provide some code

    Login or Signup to reply.
  2. 0

    I think you forgot to add top: 0; to your .slideshow-container since it has an absolute position in css.

    If your .slideshow-container is directly next to your navbar/header. Then, your top value should be the height of the navbar/header.

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

Back To Top
Search