image gallery display responsive css3 html5 problems

I have been tearing my hair out with a HTML5 CSS problem which I hope I can get a hand with (please ? )

I started off with my stylesheet > [url]http://wacico.co.uk/kdm/css/cartoon-gallery.css[/url] which on pages (in that case Bootstrap) gives me a nice display for my cartoon strips (which cna be seen here > [url]http://tted.co.uk/[/url] ) which need a 156 px width per image and a desktop width of 960px (though it’s 965 in that stylesheet link but can come down to 960 as we have image totals at 936 with 1 px between each leaving 13px to play with each side).

The same cartoon display will use the same CSS for a WordPress widget. In fact it does (but is presently set at 960 so non responsive – in that it does not stack)

I want to get things “responsive” but only in that they stack for screen sizes evenly so 6/1, 2/3, 3/2, 1/6 so only image appears on mobiles with my all important link above and below each image. Responsive without relying on any CSS form the page they are placed like say the tted.co.uk one above which is the old Bootstrap (I plan to upgrade to version 2 for responsive)

So I started trying to do this and got in a bit of a mess as can be seen here > [url]http://wacico.com/carousel-01.htm[/url] which has this > [url]http://wacico.com/assets/widgetted/comicstrip.css[/url]
stylesheet I was trying to adapt form the previous one but which has had interference from others making a proper mess of things.

The cartoon images took a lot of thought and it was decided that to get a link above and below for mobiles as well as desktops and to make it so we have 6 images to fit on a screen with a nice display on desktops, with only 1px between each image in that case, and to work at a size the cartoonists can easily work with the size ended up as 156px width and 186px height.

This needs to stay the same and seems to be where I am getting things confused with anyone I try to gt help from (and I already paid two people for help with this and got nowhere) as they are ignoring that I only want responsive stacking not image resizing which we don’t need as the images are designed for a six plate display on desktops and a 1 image display for mobiles size wise).

Now I want to try and keep the html5 “article” and footer things in the css and the fancy shadow coding but I am not having much luck getting what I need in one stylesheet so that if I take said stylesheet and the on page cartoon display from a page to any page, be it Bootstrap (at 940px) or say a WordPress widget on a site 1000px width so that the cartoon display displays at 960px.

So any ideas how I can finally get this sorted please?

The last two guys who did things used the bootstrap CSS ignoring that I need it separate and I ended up with a fine old mess where images display at 140px (distorting the images and text in the images to) width on bootstrap pages and I can’t find anywhere that I can read a straight forward easy to follow way to accomplish what I need, so can anyone help?

I can if needs be swap some SEO with someone in exchange for help if needs be as I am pretty good at that and it’s just awkward things like this that slow me down and hence why I tried to pay others to help but can’t seem to get what I need across so they understand as I don’t speak the correct tecky terms and they don’t speak plain enough English for me to follow and so it’s a big old mess and .

Anyone help at all?

Also in #HTML _↴