CSS and HTML

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted about 3 years ago

  Hi Yewande, I think what you can try is to use grid for the desktop view, but before setting that up, I would change the max-height: 100vh on your body selector to min-height:100vh; personally I probably wouldn't use max-height anywhere on this site and would just remove them all. I also suggest not using the position absolute for the logo, as that would prevent it from being movable in relation to the rest of the containers.

  In your code, try adding these lines first:

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .container {
    flex: 1;
    background-size: cover;
  // remove max-width and margin
  }
  .huddle {
  // remove position:absolute
    text-align: left;
  }
  

  I see that you have a max-width on the img right now; that can be changed to something bigger in the desktop view when you write your media query, which along with using display:grid for the layout would look something like this:

  @media (min-width: 980px) {
      .container {
          display:grid;
          grid-template-areas: 
         "huddle huddle"
         "image text";
          gap: 1rem;
      }    
      .main-image {
         grid-area: image;      
      }
      .main-image img {
         max-width: 600px;
      }
      .huddle {
          grid-area: huddle;
      }
      .text {
          grid-area: text;
      }
  }
  

  I suggest experimenting a bit more with flexbox and grid, and you may discover that you won't need to use things like max-width and position:absolute for positioning layouts like this one.

  Good luck!

  00

  Marked as helpful
• Account deletedPosted about 3 years ago

  Hello @Wandesanguine I saw your code and i think the easiest way to add responsivness from mobile to desktop is wrap the .main-image & .text in another <div> and create a Media query to style it like this :

  @media ( min-width:400px ){
  .image-text{
  display:flex;
  flex:direction; **it's the defaul value**
  align-items:center;
  justify-content: center; } }
  

  it should look like this https://prnt.sc/KJXfn9rep4Y7

  After this you could tweak the other stuff

  Feel free to contact if u got any problem or tweet it @me

  00

  Marked as helpful