Search code examples
htmlcssalignmentpositioning

How to get icons on top of the text

I'm trying to get icons (png files) on top of the text and make it look like that. Also I want to keep it responsive.enter image description here

But my icons are on the side and I can't seem to figure out how to to this. Tried adjusting padding, items align, changed position settings and so on. I probably could adjust icon positions with top and left commands, but it would destroy the responsiveness. Any help?

.icon {
    width: 100px;
    height: auto;
    margin: 0 0 15px 0;   
}

.rows {
    display: flex;
    flex-direction: row; 
    width: 95%;
    top: 13em;
    float: right;
    position: relative;
    border-style: solid;
    
}

.feature {
    
    text-align: center;
    line-height: 24px;
    min-width: 31%;
    
}

.feature h3 {
    color: #f98673;
    margin-bottom: 10px;
}

.feature p {
    color: #fff;
    margin-bottom: 0;
  }
<div class = "rows">
            <div class="feature">
                <img src="group.png" class="icon" />
                <h3>Watch or listen together</h3>
                <p>
                  Start a session and invite your friends by sharing your friend code with them.
                </p>
              </div>
              <div class="feature">
                <img src="list.png" class="icon" />
                <h3>Build up the queue</h3>
                <p>
                  Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
                </p>
              </div>
              <div class="feature">
                <img src="chat.png" class="icon" />
                <h3>Use enhanced features</h3>
                <p>
                  New features are added on top of streaming websites such as real-time chat and timestamp markers.
                </p>
              </div>
              </div>

Solution

  • You could achieve this by wrapping the icon and the text below in another div and applying flex like so :

    <div style="display:flex;flex-direction:column">
<img src="group.png" class="icon" />
<h3>Watch or listen together</h3>
</div>