Images side by side

HTML & CSS
1

What’s the best strategy to have 2 images side by side, to move vertically as the screen narrows, so that they do not become too small in mobiles?

This is what I have at moment and images are already vertical…

    <div class="ad">
    <div class="pic300"><img src="images/guagua.jpg" title="Public transpost: the gua-gua in Santo Domingo" alt="Public transpost: the gua-gua in Santo Domingo" width="300" height="224"></div>

    <div class="credit">
    <a href="sandra2.html" rel="nofollow" target="_blank" >A gua-gua - Sandra and Colin Rose </a>    
    </div>


    <div class="pic300"><img src="images/carroSD.jpg" title="Public transpost: the gua-gua in Santo Domingo" alt="Public transpost: carro publico" width="300" height="225"></div>

    <div class="credit">
    Carro publico - dominicana.blox.pl
    </div>
    </div>

the css is

    .ad{
    display:inline;
    text-align:center;
    padding:0 0 20px 8px;

    }

    .ad a{
    color:darkblue !important;
    }

.pic300{
margin:0 auto;
text-align:center;
}


.pic300 img{
width:90%;
height:auto;
max-width:300px;
margin:0 auto;
text-align:center;
border:7px solid gray;

}  


.credit{
text-align:center;
font-size:12px;
margin-bottom:20px;
}
2

It would be better to set this up in CodePen so we can tinker with a working demo. I’ve also fixed your code formatting. Please format code when you post it.

Are you familiar with media queries?

3

Right! I have not gone as far as MQ yet because the images are displayed vertically and I must get them side by side before I continue.

I guess it is to do with display (inline, block, etc) but I tried them all and cannot see where the problem is. If I sort this out I can then look at MQ

CodePen? Do I paste the whole page, which is in Notepad+ at the moment?

4

Hi ralph

I think I’ve cracked it.

Leave it with me. Thanks

5

Hi

I solved one problem, found another!

Why do my side-by-side images have padding top and bottom inside the border?

I’ve checked image sizes, css, and cannot find the culprit

I’ve placed the page in temporary folder

http://pintotours.net/TEMP1/TAXI.html

6 
.together img {
    color: blue;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-top: 20px;
    text-align: center;
    width: 90%;
}
2 Likes
7

I’m blushing…

Need new glasses (and a new brain while I’m at it!)

many thanks

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.