CODEWITHSUNDEEP
htmlcssalignmentpositioning
Denis Kviatkovskij
Denis Kviatkovskij

Reputation: 39

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>

Upvotes: 0

Views: 969

Answers (1)

Hadi Pawar
Hadi Pawar

Reputation: 1126

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>

Upvotes: 1

Related Questions