Im having trouble containing a title an image and a button


Joined
Oct 25, 2022
Messages
3
Reaction score
0
I'm using css grid,.... It all seemed so simple, but I spent hours yesterday trying to get a full page div to stick to viewport height when shifting a page between laptop and desktop, from screen to screen, on one there would be nothing hidden and no scroll bar on one screen, and then, in the next screen, there would be enough of the page hidden to be annoying and to create a scroll bar... I finally got it, I wanted a space for a title then an image under it, and then a button on the bottom, I assumed if I had a parent container for all three elements that they would stick together as I expanded minimally between the screens... this amount seems too small to be using media queries (yet), but, unfortunately, it hasn't worked as you can see in the Loom video they don't expand and contract in unison.....well they do but not the way I was expecting. loom here

CSS:
* {

  margin: 0;

  padding: 0;

  border: 0;

  box-sizing: border-box;

}


body {

  background-color: red;

  height: 100vh;

}

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

  gap: 0px 0px;

  grid-auto-flow: row;

}

.container {

  height: 100%;

  overflow: hidden;

  background-color: black;

  justify-items: center;

}

.Pad {

  grid-area: 1 / 1 / 13 / 13;

  border: dotted 7px blue;

  height: 100%;

  width: 100%;

}


.Head_Holder {

  grid-area: 1 / 1 / 2 / 13;

}


.Footer_Holder {

  grid-area: 12 / 1 / 13 / 13;

}


.Vid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;

  gap: 0px 0px;

  grid-auto-flow: row;

  grid-template-areas:

    "Title Title Title Title Title"

    "Video_Cont Video_Cont Video_Cont Video_Cont Video_Cont"

    "Video_Cont Video_Cont Video_Cont Video_Cont Video_Cont"

    "Video_Cont Video_Cont Video_Cont Video_Cont Video_Cont"

    "Video_Cont Video_Cont Video_Cont Video_Cont Video_Cont"

    "CTA CTA CTA CTA CTA";

  grid-area: 2 / 3 / 12 / 11;

  border: dotted 3px red;

}

.Vid {

  width: 80%;

}


.Title {

  grid-area: Title;

  background-color: yellow;

}


.CTA {

  grid-area: CTA;

  background-color: orange;

}


.Video_Cont {

  grid-area: Video_Cont;

}

.shela {

  width: 100%;

}
HTML:
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="Style.css" />

    <title>Document</title>

  </head>

  <body>

    <div class="container">

      <div class="Head_Holder"></div>

      <div class="Pad"></div>

      <div class="Vid">

        <div class="Title"><h1>Title</h1></div>

        <div class="Video_Cont">

          <!--long placeholder image address hidden here-->

          <img

            class="shela"

            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtMAAAF6CAYAAADbD9SKAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3Xm8ndO9P/AVlJoahIrwy9BEkJIEMU8RQWuoXlR1NFzKD1e15jZFI0LpYC41q+n2XkpbdY2peYiYoiGGG1GEmGuqMfe1Hq9znOzsc84+6yQ5ayXv/Z9mr2d/9/uz+np9znOe8zzdxr//gxnBiwABAgQIECBAgACBDgt0U6Y7bGYBAQIECBAgQIAAgUpAmbYRCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAAAQKJAsp0IpxlBAgQIECAAAECBJRpe4AAAQIECBAgQIBAooAynQhnGQECBAgQIECAAAFl2h4gQIAAAQIECBAgkCigTCfCWUaAAAECBAgQIEBAmbYHCBAgQIAAAQIECCQKKNOJcJYRIECAAAECBAgQUKbtAQIECBAgQIAA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"

            alt=""

          />

        </div>

        <div class="CTA"><h1>Button</h1></div>

        <div class="Footer_Holder"></div>

      </div>

    </div>

  </body>

</html>
https://www.loom.com/share/66c54f7a4ab84a3cb663834f9aac10b7
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
228
Reaction score
29
You really do not need 12 divisions for columns or rows. You used grid-auto-flow: row; in the container and then overrode it by placing grid-area: in the divs.
Your site is just 3 columns. One of them is further broken down into 4 columns. (Maybe that's where you got the 12 from)
Here are the main three sections in CSS all contain a word and a color.
Code:
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    color:white
}
body {
    background-color: red;
    height: 100vh;
}
.container {
    display: grid;
    grid-template-rows:  auto auto 85%;
    gap: 0px 0px;
    grid-auto-flow: column;
}
.container {
    height: 100%;
    overflow: hidden;
    background-color: black;
    justify-items: center;
}
.Head_Holder {
    background-color: blueviolet;
    width: 100%;
}
.Pad {
    border: dotted 7px blue;
    width: 100%;
}
.Vid {
    width: 80%;
    background-color: pink;
}

If you have problems with the CSS for Vid, come on back.
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top