cPanel Question posted in
The official documentation can be seen here.

HTML, CSS image positioning – CPanel

From Cpanel preview, images are arranged horizontally.

But when I publish the actual website, the images are arranged vertically.

The HTML Code is this

<p dir="ltr">
  <strong>
  <span style="font-family:Arial,Helvetica,sans-serif">
   <span style="font-size:14px">
    <a href="https://www.dur.ac.uk/dece/" target="_blank">
     <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/durham_logo.png" style="height:30%; width:30%"/>
    </a>
    <a href="https://bitbots.pk/about" target="_blank">
     <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/bit-bots-logo.png" style="height:30%; width:30%"/>
    </a>
    <a href="https://www.goread.pk/" target="_blank">
     <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/goread-logo.png" style="height:30%; width:30%"/>
    </a>
    <a href="https://deafreach.com/" target="_blank">
     <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/deaf-reach-logo.png" style="height:30%; width:30%"/>
    </a>
   </span>
  </span>
 </strong>
  <br/>
</p>

I want the website to have images side-by-side horizontally. How to do that?

Tags:

3

Answers


  1. 0

    I had similar issues but it was resolved using max-width not the percentage. Try it.

    Login or Signup to reply.
  2. 0

    When I ran your code snippet, only the 4th image is in the next line and that is because the images’ width crosses the window size which makes the last image move down to the second line. Each image is of 30% width, obviously, you cannot accommodate all the images in one row.

    Login or Signup to reply.
  3. 0

    Okay, first of all your codes instruction is totally bad, You need to use display: inline-block to let parents controll their children easily. as you can see in the snippet you can find how i used display and max-width and also never use limited width for img tags sometime’s decrease’s your image quality.
    if you want to learn about side-by-side things take a look at this link

    a {
display: inline-block;
    width: 100%;
    max-width: 120px;
margin-right: 30px;
  
}

a:last-child {

margin-right: 0;
}

img {

width: 100% !important;
}
    <p dir="ltr">
 <strong>
  <span style="font-family:Arial,Helvetica,sans-serif">
   <span style="font-size:14px">
<a href="https://www.dur.ac.uk/dece/" target="_blank">
 <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/durham_logo.png" style="height:30%; width:30%"/>
</a>
<a href="https://bitbots.pk/about" target="_blank">
 <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/bit-bots-logo.png" style="height:30%; width:30%"/>
</a>
<a href="https://www.goread.pk/" target="_blank">
 <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/goread-logo.png" style="height:30%; width:30%"/>
</a>
<a href="https://deafreach.com/" target="_blank">
 <img alt="" src="https://edtechworx.s3.amazonaws.com/ckuploads/2020/06/20/deaf-reach-logo.png" style="height:30%; width:30%"/>
</a>
   </span>
  </span>
 </strong>
 <br/>
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search