I am trying to workout why the stamp card elements do not appear central when viewing on a mobile.
I can see via the inspector that the table has a class .loyalty_stamps_table
The viewable columns change depending on device size, but is there a way of making the row elements central irrelevant of device?
I have been playing around with margins and content justify in the table class, but
no joy.
However I think the real problem is that you have not followed the strict bootstrap guidelines in that elements must have a parent container class, then a row class and then finally your content goes into column classes. This structure must be constant.
You have also changed the default padding to 7px on the column classes (although for the items above you removed it all) which means that the boostrap grid is broken because the row class in bootstrap have negative horizontal margins of 15px that match the 15px padding on the column classes and on the container class. All three work in unison and you can’t change one without changing the others accordingly.
As an aside you should never change the default bootstrap code but rather uses over-rides in your custom css where necessary.
Hopefully the quick fix I offered will suffice for now rather than reformatting that whole page.
You should consider a move to bootstrap4 as it uses flexbox rather than floats and is easier to control. However, I realise that’s probably too late at this stage
@darrenbri, please allow me to add a couple of general code suggestions.
(1) When you write your HTML, you can catch any number of errors early (thereby avoiding compounding errors) by validating your code as you go along using https://validator.w3.org/nu/.
It looks like line 57 contains most (but not all) of the errors caught by the validator. The descriptions of the errors should help you resolve them in short order.
