figcaption wrap text around image

I was looking for solution to have long text wrap around image instead of 2 columns default layout.

If you are interested, below is solution:

My changes to joomla.css. Starting from line 1200.

Code: Select all

/* Gallery page */
.gk-photo {
   clear: both;
   padding: 35px 0;
}
.gk-photo:after {
   clear: both;
   content: "";
   display: table;
}
.gk-photo > a {
   display: block;
   float: left;
   max-width: 45%;   
}
.gk-photo img {
   float: left;
   max-width: 100%;
     padding-right: 20px;
}
.gk-photo figcaption {
   /* float: right; */
   /* width: 45% */;
}
.gk-photo h3 {
   font-size: 24px;
   padding: 30px 0;
   text-align: left;   
}
.gk-photo p {
   font-size: 16px;
   margin: 0;
   text-align: left;
}
.gk-photo-right > a,
.gk-photo-right img {
   float: right; 
     padding-left:20px;
     padding-right:0px;
}
.gk-photo-right figcaption {
   /* float: left; */
}


Hi

Thank You for that, but I would advice to use override.css file instead of changing anything in css. It will be much easier to keep one file when template update will be needed.