I am working on a Joomla based website template called xtec from www.crosstec.de that does not like me using JQuery based code inserted into any articles.
I am trying to create a responsive div that has 2 images in it and am trying to do it entirely in css.
This is what I am trying to acheive.
1) Normal width screen/browser has both images each 465px wide x 507 pixel in height - side by side with a 2 pixel gap between them centered horizontally in the browser window
2) As I reduce the screen/browser width the images should both shrink proportionally until at the point of screen / browse rreaching 850px wide then images should move to a single column and then both images are aligned vertically on top of each other, as I reduce the screen / browser they continue to reduce proportionally in size, still centered in the column.
I used the code from as a starter 的代码作为入门
My site URL is http://www.clickandrent.mobi and the 2 images I am trying to perform this on are below the full width slider and above the bottom 2 images.
Many Thanks - Martyn
Please add this code to your stylesheet, it should work. I just tested it on your website and it's working:
.group {
text-align: center;
}
.left {
display: inline-block;
width: 38.5%;
}
.left img {
float: right;
}
.right {
display: inline-block;
width: 38.5%;
margin-left: 3%;
}
.right img {
float: left;
}
@media (max-width: 850px) {
div.left {
float: none;
width: auto;
display: block;
margin-bottom: 20px;
}
div.left img {
display: block;
margin: 0px auto;
float: none;
}
div.right {
float: none;
width: auto;
margin-left: 0%;
display: block;
}
div.right img {
display: block;
margin: 0px auto;
float: none;
}
}
2px
gap:
25px
gap:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.