Question 336320 in Html Question posted in
Some basic documentation can be found here.

Html – how to do responsive image but have text beside image

enter image description here
How to make it look like the picture above?

                    <div class="row">
                        <img class="" src="/images/arrow_left_icon.png" />
                        <p class="">tip</p>
                    </div>

i would like responsive look like the picture i post

Tags:

2

Answers


  1. 0

    You can use display: flex property to arrange both the image and content horizontally. But you need media query for adding css in responsive for specific breakpoint.

    For example:-

    @media only screen and (max-width: 1199px) {
  .row {
    display: flex;
  }
} /* 1024 */
    Login or Signup to reply.
  2. 0

    Your question was not entirely clear regarding how you want the layout to look and the how you want it to be responsive. Given the limited information you provided, here is how I would go about it.

    First, modify your HTML slightly so that you have some additional classes to work with and add the alt attribute to your <img>. You probably don’t want to add specific styling for this section to the .row class since that is likely to be used in a lot of other places as well, so add an additional class to that div.

    <div class="row arrow-wrapper">
  <img class="img-arrow-left" src="/images/arrow_left_icon.png" alt="Black arrow pointing left" />
  <p class="arrow-text">Tip</p>
</div>

    Next, I apply the img styles I use for every project for better default settings and to enhance responsiveness, and then I use grid to make the layout.

    /* Img reset I use in every project for enhanced responsiveness */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: smooth;
  font-style: italic;
  shape-margin: 1rem;
  vertical-align: middle;
}

/* 
 * Create a CSS Grid with display: grid, then
 * Set up three columns in the grid, one for arrow, one for
 * text in center, one for where there is empty space on the right,
 * with each column taking up 1 equal fraction of the space.
 * Then use place-items to put all the elements in the center of
 * the grid cells.
 */
.arrow-wrapper {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
}

    Here is the the snippet demo so you can see it working.

    img {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: smooth;
  font-style: italic;
  shape-margin: 1rem;
  vertical-align: middle;
}

.arrow-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
}

.arrow-text {
  font: 700 1rem system-ui, sans-serif;
}
    <div class="row arrow-wrapper">
  <img class="img-arrow-left" src="https://assets.codepen.io/1157507/left-arrow.png" alt="" />
  <p class="arrow-text">Tip</p>
</div>

    And here is a link to my codepen where it is demo’d as well so you can actually test what it looks like when you change the viewport size. If this is not what you are looking for, please update your question with more details.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search