skip to Main Content

I am trying to make a layout that looks roughly like this on a computer:
wide layout
and this on mobile:
tall layout

I CANNOT use a separate stylesheet or the < style > tag, only the style attributes because it’s for a site that doesn’t allow these.

I tried a few different tutorials but can’t make it work. Any help is appreciated, cleaner code tips too since I am a beginner. Thank you!

My code:

<div class="window" style="border: hidden; border-radius: 20px; box-shadow: 0 0 5px red; text-align: center; font-family: monospace; color: black; background-image: linear-gradient(#e6558b,red); padding: 10px; max-width: vw; max-height: 300px; margin: 10px; align-items: center;">
  
  <div class="title" style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; margin: inherit; align-items: inherit; text-align: inherit; max-height: 75px; font-size: 100%;">
    <p style="font-weight: bold;"><img src=""> title <img src=""></p>
    <p>subtitle</p>
  </div>
  
  <div class="miniholder" style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 100px)); grid-gap: 1rem;">
      
    <div class="leftortop" style="border: 1px solid black; height:100px; width: 100%; margin: inherit;">
      <p><img src=""></p>
    </div>
    
    <div class="rightorbottom" style="border: 1px solid black; height:100px; width: 100%; margin: inherit; align-items: inherit;">
      <p style="width: 100%; height: 100%;">lorem ipsum</p>
    </div>
  </div>
</div>

I tried initially using flex boxes but I don’t know how those really work…
I found this to be kind of helpful but it wasn’t exactly what I wanted for my layout and I also couldn’t really get it to work.

2

Answers


  1. A possible solution is to use flexbox with flex-wrap: wrap.

    First, we make .window a grid so as to use gap; note that grid-gap is just an alias of gap:

    .window {
      display: grid;
      gap: 1rem;
    }
    

    We then make .miniholder a flexbox and allow it to wrap:

    .miniholder {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }
    

    Now, for the hard part, we arbitrarily choose 2 / 5 as the ratio of .leftortop and .rightorbottom. Multiple that by another arbitrarily chosen number, we got 150 and 375. These will be .leftortop and .rightorbottom‘s flex-basis-es, or, basically, min-widths. flex-grow makes them expand their width as much as possible, with .leftortop as 2 / 5 as fast as .rightorbottom.

    .leftortop {
      flex-grow: 2;
      flex-basis: 150px;
    }
    
    .rightorbottom {
      flex-grow: 5;
      flex-basis: 375px;
    }
    

    From these, I think you will be able to figure out the rest.

    Try it:

    .window, .title, .miniholder, .leftortop, .rightorbottom {
      padding: 1rem;
    }
    
    .window {
      display: grid;
      gap: 1rem;
    }
    
    .miniholder {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }
    
    .leftortop {
      flex-grow: 2;
      flex-basis: 150px;
    }
    
    .rightorbottom {
      flex-grow: 5;
      flex-basis: 375px;
    }
    
    
    /* Demo only */
    
    .window, .title, .miniholder, .leftortop, .rightorbottom {
      outline: 2px solid black;
    }
    
    .leftortop, .rightorbottom {
      outline: 2px solid #aaa;
    }
    <div class="window">
      <div class="title">Header</div>
      <div class="miniholder">
        <div class="leftortop">Left content here</div>
        <div class="rightorbottom">Right content here</div>
      </div>
    </div>
    Login or Signup to reply.
  2. Since you are a beginner; use {flex, flex-wrap, gap/justify-content} on the container, {max-width/width with percentage(i.e – if you need 3 elements inside the parent you put 30% and add some gap) } on the child elements.

    If you do a lil google you can figure out everything.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search