Basically, the issue is with your table structure (somewhere). Technically you should not be using tables for this, so I was about to give you a solution that uses inline columns (which this theme has styling for) because you get to have a consistent structure, but also you can maintain a responsive layout. However, I’m thinking you are not too comfortable working in the “text” view of your editor…especially when you will probably be doing a lot of these shopping layout pages that you have, so here is a sample table to use as a guideline where I create one row of your shopping layout for Dog 1, 2, 3, and 4 notecards:
Dog 1 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00
Box of 6, A2 size, 4.25" x 5.5", $11.95
Dog 2 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00
Box of 6, A2 size, 4.25" x 5.5", $11.95
Dog 3 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00
Box of 6, A2 size, 4.25" x 5.5", $11.95
Dog 4 Notecard
Cream Colored Paper, Blank Inside.
A2 size, 4.25" x 5.5", $3.00
Box of 6, A2 size, 4.25" x 5.5", $11.95
This will allow you to still use tables still if you are more comfortable with that. Add a class to the table like I did “shoppingtable” and then in your stylesheet (your child theme which I see you are using), add this:
.shoppingtable td {
text-align: center;
}
.shoppingtable input {
background: none;
border: none;
}The above will to a global centering of all your table td cells, plus your input buttons will have that grey background and bordering removed. This means you won’t have to do this to every single table cell because it’s all done from the one css for the complete table and any table that uses the class “shoppingtable”.
If you want a table structure to use, then just add more rows as needed, then use this:
content
content
content
content
Make sure there is nothing else added such as cell-padding, cell-spacing, etc, because this is obsolete now as everything is handled from CSS.