CODEWITHSUNDEEP
htmlcsscss-grid
Amine El were
Amine El were

Reputation: 855

wrong proportions with the grid system

I'm trying to build a responsive website and I'm stuck with this problem: I'm applying the grid system to a div but I'm getting wrong proportions as shows the image below:

In 320px viewport width:

enter image description here

In the device toolbar with a 320px too:

enter image description here

I wanna know the reasons behind that behaviour. I think It's something to the viewport width ?? and thank you in advance

here is my code:

HTML:

<div class="blue-box">
 <p class="container-3"><span  data-aos="fade-right"  data-aos-duration="1800"
    class="word-bb-1">well </span><span
   class="word-bb-2"
    data-aos="fade-left"  data-aos-duration="2000">I think your first
  question</span>
  <span class="word-bb-3" data-aos="fade-right"   data-aos-duration="1500">is about Amine right</span>
  <span class="word-bb-mark" data-aos="fade-down-left"  data-aos-duration="2000">?!!!</span>
  <img src="../vector/murva 1.1.png" class="img-box" alt=""  data-aos="fade-down"
   data-aos-duration="1500">
</p>
</div>

CSS

  .blue-box {
    margin-top: 10vh;
    width: 100vw;
    height: 33vh;
    background-color: #33cccc;
  }

  .img-box {
    width: 40vw;
        position: relative;
        left: -7vw;  }

  .container-3 {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 16vh auto 3vh auto;
    color: #ffffcc;
    font-family: Roboto;
    grid-column-gap: 5vw;
  }

 .word-bb-1 {
   font-size: 10vh;
   font-weight: bold;
   text-transform: capitalize;
   margin-top: 5vh;
   margin-left: 10vw;
  }

  .word-bb-2 {
    margin-top: 8vh;
  }

  .word-bb-3 {
    font-size: 7vw;
    grid-column: 1/3;
    text-align: center;
    font-weight: bold;
  }

  .word-bb-mark {
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    grid-column: 1/3
  }

Upvotes: 0

Views: 76

Answers (1)

Lucas Noetzold
Lucas Noetzold

Reputation: 1740

Add text-align: right to your .word-bb-1 span. It is the remaining space between the word "Well" and the end o the stretched span.

Any element inside a grid layout will be stretched to cover the whole grid area it is inside, so if you want elements to have some alignment inside the area you must use wrappers or, if it is just text, align it.

.word-bb-1 {
   ...
   text-align: right;
}

Upvotes: 1

Related Questions