WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Bakery Shop => Topic started by: sky writer on September 05, 2015, 06:05:47 PM

Title: Bakery tables on Mobile Responsive
Post by: sky writer on September 05, 2015, 06:05:47 PM
I am having problems with the display of information in certain tables, when viewed on small viewport / mobile device.  The data is overlapping and impossible to read, specifically, or most evidently on the "Shopping Cart" and "Review Order" pages.  Is there a way to easily fix this?

I figured others would have run into this issue, but I can't find any mention on the forum.  Maybe I am not using the correct search terms, or perhaps it is in a thread of another language.

I have zipped two images to show exactly what I am experiencing.

Thank you in advance for any assistance you might be able to offer.

(if there is a way to embed the images in this thread, please advise)
Title: Re: Bakery tables on Mobile Responsive
Post by: dbs on September 05, 2015, 07:14:15 PM
Hi, a search for "bakery responsive" shows some results. One of this is:
http://forum.WebsiteBaker.org/index.php/topic,28214.msg196818.html#msg196818
Title: Re: Bakery tables on Mobile Responsive
Post by: sky writer on September 05, 2015, 07:46:24 PM
Thank you for your reply.  I definitely did search the forum, and did see that post and was excited at first, but correct me if I'm wrong, that is specific to the item overview page.  I do not see how it would have any effect on the pages I am referring to.  Maybe I do not understand how Bakery pages work.
Title: Re: Bakery tables on Mobile Responsive
Post by: dbs on September 05, 2015, 08:45:02 PM
My fault, did not read everything.
The HTML for the cart is here: bakery/templates/cart/
You can 'translate' the tables in the htt-files into divs. Hope it helps.
Title: Re: Bakery tables on Mobile Responsive
Post by: Tez Oner on September 14, 2015, 07:45:54 PM
You can 'translate' the tables in the htt-files into divs. Hope it helps.

Another way to do this is to make a 'small screen css rule',
and make the tr and td's like 100% width.

Cheerz,

Tez Oner