How do I add space between the image and the text that works for both mobile and computer screens.

Question

1.00/5 (1 vote)

See more:

I am trying to make a wrapper with image on the left and text on the right. I want to add space between the text and the image that will work properly for both mobile and computer screens.
Thank you.

What I have tried:

html :

HTML

<div Id="wrapper">
                <section class="p">
                    <ul id="a">
                      <li>
                          <img src="boy1.jpg" alt="" width=180px class="pic">
                          <p class="pa">info</p>
                        
                      </li>
                    </ul>
                  </section>
          
                     </div>

CSS

#a, #g {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  ;
}

.pic {
  float: left;
}

#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style-type: none;
text-decoration: none;
}

ul li:hover{
  cursor: default;
  color: white;
}

Posted 4-Nov-21 0:59am

Keerat Singh _ 9H

Updated 4-Nov-21 3:18am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-11-04T03:18:00

Solution 1

You haven't shown us what you've tried, or what's wrong with it.

If you just want space between the image and the text, then flexbox should work:

CSS

#a > li:first-child {
    display: flex;
}
#a .pa {
    margin-left: auto;
}

Demo[^]
A Complete Guide to Flexbox | CSS-Tricks[^]
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]

Posted 4-Nov-21 3:18am

Richard Deeming

Comments

Keerat Singh _ 9H 5-Nov-21 7:51am

Hi thank you. Can you also tell how to make the text-align to center and if I increase the size of image will it work? Thanks

Richard Deeming 5-Nov-21 9:33am

Increasing the size of the image will work.

I don't know what you mean by setting the text align to center? Do you want the text aligned to the center, or do you want it aligned to the right?

Keerat Singh _ 9H 7-Nov-21 3:42am

Center

Richard Deeming 9-Nov-21 3:44am

Then add margin-right:auto to the #a .pa rule.
Demo[^]

Keerat Singh _ 9H 6-Nov-21 7:32am

Center