CODEWITHSUNDEEP
htmlcss
Thomas Dakan
Thomas Dakan

Reputation: 13

Simple flexbox grid using inline styles

I am working on a site that I am building for myself on squarespace which is why I am trying to write this using inline css. I am trying to get an image styled in a row with some text. The image should be 1/12 of the row. I need to do this in html/css because there will be additional, identically styled rows below the one that I am depicting in jsfiddle.

I can't seem to get he image to scale down and fit on the same row as the text, with the same height as the text. I had it working and then accidentally reverted my work... so it's time for a break. Hoping someone will take pity on me before I come back to it.

Here's my JSFiddle with image and text: https://jsfiddle.net/hrwj2u7c/

<div style="display:flex;flex-direction:row;flex-wrap:wrap;background-color:#bcc0c6">  
    <div style="flex:0 1 150px;">
            <img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
    </div> 
    <div style="flex:1 0 auto;">
        <span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
        <p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording. We'll even be happy to teach you, so that you'll be more educated going forward!   
        </p>
    </div>  
</div>

Upvotes: 1

Views: 1232

Answers (1)

tao
tao

Reputation: 90038

Is this what you're trying to achieve?

<div style="display:flex;flex-direction:row;align-items: center;background-color:#bcc0c6">
  <div style="flex: 0 0 150px;">
    <img src=http://creaturesoundproductions.com/s/HelpSpeaker.png style="width: 100%">
  </div>
  <div>
    <span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
    <p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
      We'll even be happy to teach you, so that you'll be more educated going forward!
    </p>
  </div>
</div>

Key points:

  • flex-basis: 150px; flex-grow: 0; on image container
  • width: 100%; on <img>
  • removing flex-wrap: wrap from the overall wrapper (which would cause the second div to go below).
  • i also added align-items: center to the wrapper, to align the flex items vertically. You can't really match their height, as you'll notice the second div varies in height significantly at various widths of the page, but you can align them vertically.

Now, the biggest problem with what you're trying to do (which is styling inline) is that it cannot be responsive, because you can't apply @media queries by using inline styles. However, what you can do is use <style> tags inside <body>. Example:

<style type=text/css>
  .wrapper {
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #bcc0c6;
  }
  
  .wrapper> :first-child {
    flex: 0 0 200px;
  }
  
  .wrapper> :first-child img {
    width: 100%;
  }
  
  .wrapper> :nth-child(2) {
    padding: 0 0 0 25px;
  }
  .wrapper> :nth-child(2)>span {
    font-weight: bold;
    font-size: 24px;
  }
  
  @media (max-width: 700px) {
    .wrapper {
      flex-wrap: wrap;
    }
    .wrapper> :first-child {
      margin: 0 auto;
    }
  }
</style>
<div class="wrapper">
  <div>
    <img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
  </div>
  <div>
    <span>I'm new to podcasting, and I don't know where to start!</span>
    <p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
      We'll even be happy to teach you, so that you'll be more educated going forward!
    </p>
  </div>
</div>

Upvotes: 1

Related Questions