ok here is the final css I used. I am sure there is a more elegant way to achieve it, but it works. the “finalview” image is what it produces.
*side note. Learnt that :nth-child includes all the elements so it was counting the BR even though was set to span:nth-child. Strange. which is why ther are numbered 1,3,5,7,9
/* === Begin add listing package CSS === */
#package_id_row label:first-child {float:none;text-align:center; width:100%;font-weight:600;font-size:20px;display:block;}
/* control div around radio group */
#package_id_row div {float:none !important;width:96% !important;padding:15px 2%;margin:10px auto;border:1px solid #cccccc;position:relative;}
#package_id_row div br {display:none;}
#package_id_row div span.gd-radios {vertical-align:top;width:30%;margin:10px 1%;padding:10px 1%;text-align:center;display:inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position:center top;
background-size:40px;}
#package_id_row input.gd-checkbox {width:20px;height:20px;padding:40px;float:none;display:block;margin:0 auto;}
/* child elements for packages */
#package_id_row div span.gd-radios:first-child {
color:#64a410;
border:2px solid #64a410;
background-image: url(“/wp-content/uploads/2020/04/add-listing-green2.png”) ;
}
#package_id_row div span:nth-child(3),#package_id_row div span:nth-child(5) {
color:#2495cd;
border:2px solid #2495cd;
background-image: url(“/wp-content/uploads/2020/04/add-listing-blue.png”) ;
}
#package_id_row div span:nth-child(7),#package_id_row div span:nth-child(9)
{
color:#a81683;
border:2px solid #a81683;
background-image: url(“/wp-content/uploads/2020/04/add-listing-purple.png”) ;
}
Simon 5 years ago.
