CODEWITHSUNDEEP
htmlcss
Jesus
Jesus

Reputation: 485

Adjust display items with grid and flexbox

I'm new to CSS and I created a simple container with logo and text content. I achieve this:enter image description here

I use display grid and flex depending on what I'm doing, the first thing is there is a lot of space between the logo and text container, I want them closest to each other and align text container at right: 0

Fiddle

SCSS:

.container {
  width: 100%;
  // text-align: center;
  margin-top: 5em;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-items: center;
  float: right;
  margin-left: auto !important;
  margin-right: initial;

  &__overlay {
    display: grid;
    grid-template-columns: auto auto;
    margin-left: auto;
    background-color: #48525D;
    border-radius: 129.5px 0px 0px 129.5px;
    padding: 4% 4%;
    max-width: 1200px;
    right:0;

    &-item {
      display: flex;
      align-items: center;
      justify-content: left;
    }
  }
}

.logo {
  width: 100%;
}

.title {
  color: #ffffff;
  font-weight: normal;
  line-height: 1.2;
  font-family: "Exo 2", sans-serif;
  letter-spacing: 0;
  font-size: 4rem;
  text-align: left;
}

.subtitle {
  color: #ffffff;
  line-height: 1.4;
  font-family: "Exo 2", sans-serif;
  letter-spacing: 0;
  font-size: 5rem;
  text-align: left;
  font-weight: bold;
}

.label {
  font-family: "Exo 2", sans-serif;
  color: #A60A2D;
  text-align: left;
  font-size: 3.8rem;
  font-weight: bold;

}

HTML:

   <div class="container">
     <div class="container__overlay-item">
       <img class="logo" src="https://logo.clearbit.com/facebook.com">
     </div>
     <div class="container__overlay">
       <div>
         <p class="title">Title Test</p>
         <p class="subtitle">This is a title test</p>
       </div>
     </div>
   </div>

Upvotes: 0

Views: 46

Answers (1)

Antony Sanders
Antony Sanders

Reputation: 122

My suggestion is just to use flex alone and adjust logo size and font sizes based on screen size. This will solve your issue and increase responsiveness in your layout 👍🏾

.container {
  width: 100%;
  border:1px solid black;
  margin-top: 5em;
  display:flex;
  flex-flow:row;
  justify-items: flex-end;
  margin-right: initial;

  &__overlay {
    flex: 1 0 auto;
    grid-template-columns: auto auto;
    background-color: #48525D;
    border-radius: 129.5px 0px 0px 129.5px;
    padding: 4% 4%;
    max-width: 1200px;

    &-item {
      display: flex;
      align-items: center;
      justify-content: left;
    }
  }
}

.logo {
  max-height: 100px;
  flex: 0 1 auto;
}


.title {
  color: #ffffff;
  font-weight: normal;
  line-height: 1.2;
  font-family: "Exo 2", sans-serif;
  letter-spacing: 0;
  font-size: 4rem;
  text-align: left;
}

.subtitle {
  color: #ffffff;
  line-height: 1.4;
  font-family: "Exo 2", sans-serif;
  letter-spacing: 0;
  font-size: 5rem;
  text-align: left;
  font-weight: bold;
}

.label {
  font-family: "Exo 2", sans-serif;
  color: #A60A2D;
  text-align: left;
  font-size: 3.8rem;
  font-weight: bold;

}

@media screen and (max-width: 1000px){
  .logo {
     max-height: 80px;
   }
   .title {
     font-size: 3rem;
   }
   .subtitle {
     font-size: 4rem;
   }
}

@media screen and (max-width: 600px){
  .logo {
     max-height: 60px;
   }
   .title {
     font-size: 2rem;
   }
   .subtitle {
     font-size: 3rem;
   }
}

Upvotes: 1

Related Questions