Sahitya Sahitya - 5 months ago 29
CSS Question

How to make images inside a box responsive CSS

I am facing a problem in modifying a website template. I have four images in total and I want them to appear as one in the first row centralized and the other three in the second row.
The template code by default had an arrangement to place three images side by side within boxes, but for placing only one image, how do I align the image to the center?
Here is the fiddle link :

https://jsfiddle.net/ntbmop1b/1/

I tried

position : relative
but it wasn't responsive.
Position relative trial :

<div class="s-12 m-6 l-4 margin-bottom" style="position:relative; left:18em;">
<div class="box">
<h4 style="text-align:center;"><strong>Akshay Aravindan</strong></h4><br>
<img src="img/del1.jpg" style="height:300px; ">
</div>
</div>


Can someone please help me out?

Answer

I added float:none and margin:0 auto

.size-960 .line {
  margin:0 auto;
  max-width:55em;		/*fixes width of the template's main page layout*/
  padding:0 0.625em;
 
}
.size-1140 .line {
  margin:0 auto;
  max-width:71.25em;
  padding:0 0.625em;
}
.size-960.align-content-left .line,.size-1140.align-content-left .line {margin-left:0;}
form {line-height:1.4em;}
nav {
  display:block;
  width:100%;
  background:#262626;
}
.line::after, nav::after, .center::after, .box::after, .margin::after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}
.box {
  background:rgba(255, 255, 255, 0.6);
  display:block;
  padding:1.25em;
  width:100%;
  }
.margin-bottom {margin-bottom:1.25em;}
.s-1, .s-2,.s-five,.s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-11, .s-12, .m-1, .m-2, .m-five, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12, .l-1, .l-2, .l-five, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8, .l-9, .l-10, .l-11, .l-12 {
  float:left;
  position:relative;
}
.l-offset-1 {margin-left:8.3333%;}
.l-offset-2 {margin-left:16.6666%;}
.l-offset-five {margin-left:16.6666%;}
.l-offset-3 {margin-left:25%;}
.l-offset-4 {margin-left:33.3333%;}
.l-offset-5 {margin-left:41.6666%;}
.l-offset-6 {margin-left:50%;}
.l-offset-7 {margin-left:58.3333%;}
.l-offset-8 {margin-left:66.6666%;}
.l-offset-9 {margin-left:75%;}
.l-offset-10 {margin-left:83.3333%;}
.l-offset-11 {margin-left:91.6666%;}
.l-offset-12 {margin-left:100%;} 
.s-1 {width:8.3333%;}
.s-2 {width:16.6666%;}
.s-five {width:16.6666%;}
.s-3 {width:25%;}
.s-4 {width:33.3333%;}
.s-5 {width:41.6666%;}
.s-6 {width:50%;}
.s-7 {width:58.3333%;}
.s-8 {width:66.6666%;}
.s-9 {width:75%;}
.s-10 {width:83.3333%;}
.s-11 {width:91.6666%;}
.s-12 {width:100%;}
.margin > .s-1,.margin > .s-2,.margin > .s-five,.margin > .s-3,.margin > .s-4,.margin > .s-5,.margin > .s-6,.margin > .s-7,.margin > .s-8,.margin > .s-9,.margin > .s-10,.margin > .s-11,.margin > .s-12,
.margin > .m-1,.margin > .m-2,.margin > .m-five,.margin > .m-3,.margin > .m-4,.margin > .m-5,.margin > .m-6,.margin > .m-7,.margin > .m-8,.margin > .m-9,.margin > .m-10,.margin > .m-11,.margin > .m-12,
.margin > .l-1,.margin > .l-2,.margin > .l-five,.margin > .l-3,.margin > .l-4,.margin > .l-5,.margin > .l-6,.margin > .l-7,.margin > .l-8,.margin > .l-9,.margin > .l-10,.margin > .l-11,.margin > .l-12 {padding:0 0.625em;}
.m-1 {width:8.3333%;}
.m-2 {width:16.6666%;}
.m-five {width:20%;}
.m-3 {width:25%;}
.m-4 {width:33.3333%;}
.m-5 {width:41.6666%;}
.m-6 {width:50%;}
.m-7 {width:58.3333%;}
.m-8 {width:66.6666%;}
.m-9 {width:75%;}
.m-10 {width:83.3333%;}
.m-11 {width:91.6666%;}
.m-12 {width:100%;}
.l-1 {width:8.3333%;}
.l-2 {width:16.6666%;}
.l-five {width:20%;}
.l-3 {width:25%;}
.l-4 {width:33.3333%;}
.l-5 {width:41.6666%;}
.l-6 {width:50%;}
.l-7 {width:58.3333%;}
.l-8 {width:66.6666%;}
.l-9 {width:75%;}
.l-10 {width:83.3333%;}
.l-11 {width:91.6666%;}
.l-12 {width:100%;}
.right {float:right;} 
<div class="line">
            <div class="margin">
            <h2 style="color:#000;text-align:center;"><strong>Technical</strong></h2>
            <h3 style="color:#000;text-align:center;"><strong>UDG</strong></h3>
               <div class="s-12 m-6 l-4 margin-bottom" style="float:none;margin:0 auto;">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>John</strong></h4><br>
                     <img src="img/del1.jpg" style="height:300px; ">
                  </div>
               </div>
                       
            </div>
         </div>

         <div class="line">
            <div class="margin">
            <h3 style="color:#000;text-align:center;"><strong>General Administrators</strong></h3>
                <div class="s-12 m-6 l-4 margin-bottom">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>Ashley</strong></h4><br>
                     <img src="img/sponsor3.jpg" style="height:268px; ">
                  </div>
               </div>
               <div class="s-12 m-6 l-4 margin-bottom">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>Susan</strong></h4><br>
                     <img src="img/del3.jpg" style="height:300px; ">
                  </div>
               </div>
               <div class="s-12 m-6 l-4 margin-bottom">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>Sherley</strong></h4><br>
                     <img src="img/del4.jpeg" style="height:300px; ">
                  </div>
               </div>
            </div>
         </div>
         

Comments