Hi Guys.
www.aceoftoons.com
On the ‘caratures’ form I have GridColun & GridRow that I populate from an Ajax call and clone them using the following code:
function getLifestyle() {
iframesReturnedLifeStyles = Ajax("http://www.aceoftoons.com/xxx.php" , returnedlifeStyles);
}
function returnedlifeStyles() {
//alert('returnedlifeStyles');
var i =0;
var newID;
var newImage;
var newTitle;
var newURL;
if (iframesReturnedLifeStyles.status == 200) { //success
//alert('data back '+ iframesReturnedLifeStyles.responseText);
dataReturned = JSON.parse(iframesReturnedLifeStyles.responseText);
var newArray = [];
newArray = dataReturned['data'];
for (var i = newArray.length - 1; i >= 0; --i) {
newID = 'animID'+newArray[i]['anims']['id'];
newDiv = $('#animID0')
.clone(true,true)
.attr('id', newID) // <-- Note this line
//.attr('class', 'testImage')
.insertAfter("#gridRow1");
newImage = newArray[i]['anims']['thumbnail'];
newTitle = newArray[i]['anims']['title'];
newURL = newArray[i]['anims']['url'];
$(newDiv).find("img").attr("src",newImage);
$(newDiv).find(".cont1").html(newTitle);
$(newDiv).find(".cont2").text(newURL);
console.log(newArray[i]['anims']);
console.log(newArray[i]['anims']['animID']);
console.log(newArray[i]['anims']['thumbnail']);
}
animID0.hidden = true;
}
}
I have set the gridColumn (animID0) class = testImage
I have set the margin to 1%
This results in the following:
Settings 1
If I use the inspector and set margin : 0px !important I get the following
Settings 2
I need it to look like settings 2 with a margin on the gridColumn. The margin setting screws the size-lg size-md settings as in Settings 1.
So I need:
on large screen 4 across with a 1 % margin
On med screen 3 across with a 1% margin
Small screen 2 across with a 1 % margin
Tiny screen 1 across with a 1 % margin
I’ve played around for a couple of hours but cannot get it to work.
Cheers
Steve Warby
