0

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 "2-column CSS responsive layout with a responsive image" 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

Community
  • 1
  • 1
Martyn
  • 25
  • 1
  • 5
  • Martyn, while the solution for your issue is quite easy, by seeing your site I see you have more issues AND you're a bit confused about responsive design. For starters, if you do what you say, you'll have your 567px images stretched to 850px width with a really fuzzy quality. This, added to the fact that you're using really low resolution images will add to a very low quality site. I'd suggest to re-write you game plan first – Devin Sep 19 '14 at 21:11
  • Yep these images are just a first pass for testing - I will add some larger better quality images over the weekend. – Martyn Sep 20 '14 at 08:20

1 Answers1

0

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:

enter image description here

25px gap:

enter image description here

Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36
  • Hi - I added in your code but seem to get the images stacked on top of each other even on a wide browser. Did I do something rather dumb. – Martyn Sep 20 '14 at 08:38
  • This should work perfectly since I've tested it amd it was working fine. Are you adding the complete code which I've put above including the `@media (max-width: 850px)` part? – Fahad Hasan Sep 20 '14 at 13:42
  • yep - I just added tags around your code – Martyn Sep 20 '14 at 14:14
  • I just checked your website and the wrong thing which you did is that you removed the styles which you had originally added to `
    ` and `
    `. You didn't need to remove those styles.
     – Fahad Hasan Sep 20 '14 at 14:18
  • Please check my updated answer above and add all of these styles inside your stylesheet. – Fahad Hasan Sep 20 '14 at 14:21
  • Looks like I should have added your code after my original code. I now have the images moving from 2 cols to 1 col but don't have them centralised horizontally with a 2px gap down the middle yet. – Martyn Sep 20 '14 at 14:26
  • Do I need to do anything with the group div to centralise it horizontally
    – Martyn Sep 20 '14 at 14:48
  • @Martyn I've again updated the styles in my original answer, please add them to your stylesheet. This should work perfectly for you. – Fahad Hasan Sep 20 '14 at 15:03
  • Hi Fahad - getting closer it goes a little funny when shrinking the browser width the images float left and right in the single column – Martyn Sep 20 '14 at 15:30
  • @Martyn: Sorry about that, I've again updated my code. This should fix the issue which you're facing when the images move to a single column. – Fahad Hasan Sep 20 '14 at 15:35
  • Yep - that sorted the 1 column - just need to centralise both images in the single column – Martyn Sep 20 '14 at 15:44
  • The updated code which I've put should've fixed everything but you're making a very small error. There needs to be a gap between `0px` and `auto` in `margin: 0px auto` for the styles for `div.left img` and `div.right img` under `@media (max-width: 850px)`. – Fahad Hasan Sep 20 '14 at 16:01
  • Man - so sorry - cut and paste messed up - so I have only one issue, I neeed to push the images together on the horizontal line with a 2 pixel gap while they are side by side – Martyn Sep 20 '14 at 16:33
  • @Martyn you can change the value of `margin-left` assigned to `.right` from `3%` to `2px`. – Fahad Hasan Sep 20 '14 at 16:48
  • That did not create a 2 pixek gap - was this the right paramter to modify – Martyn Sep 20 '14 at 17:29
  • @Martyn: Yes, that is indeed the correct parameter to modify. You can increase that value and see that the gap between the two images would increase. – Fahad Hasan Sep 20 '14 at 19:55
  • I've updated my main answer with two images, the first image shows the two images inside your website with a `2px` gap between them and the second image shows the two images inside your website with a `25px` gap between them. – Fahad Hasan Sep 20 '14 at 20:02