Responsive table content centering

My question relates to the site:

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.

or is it related to the media query?

Login to access card stamps.

password: 123456


What are the stamp card elements ?

I can only access this page.

Hi, OH SORRY… please login to see the card:

password: 123456

Ok, you seem to be delivering a different stylesheet for mobile as the desktop small screen doesn’t match your mobile screen which is odd.

Anyway assuming I am looking at the correct items I don’t see any proper mechanism for centring the elements as they are floated.

Here is a screenshot where I have outlined the elements and you can see that the parents are centred but the inner floated blocks just align-left.

A quick fix would be to add a little padding to move the element to the centre like this:


Which produces this result:

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 :slight_smile:


Your reply was awesome!
Thank you, for the great help and pointers!


@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

For example:

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.

(2) There is a separate validator for CSS:

(3) And if you just can’t seem to find a reference that adequate explains the proper usage of the HTML or CSS elements, you can always ask here.


Great tips! thank you

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.