Responsive Shopping Cart

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Responsive Shopping Cart

Post by lpug » Sun Apr 08, 2018 8:41 am

I am trying to setup a shopping cart, the standard look of 4-5 items across the screen horizontally.
I have found that the flex box layout almost works to my liking, I have created 4 table cells which I use to describe my product and shift these into the flexbox layer. When I preview my page they all line up nicely, however as I reduce my viewport they squash up horizontally. I'd really like these to shift vertically as the viewport becomes smaller. It sort of works but in the opposite direction i.e. as I make the viewport larger the cells shift vertically if I change the flex direction to column. Any other suggestions?

My site isn't live so cant post links.

Thanks

User avatar
Pablo
 
Posts: 17606
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Shopping Cart

Post by Pablo » Sun Apr 08, 2018 9:28 am

Did you make the items flexible by setting the 'flex grow/shrink' options?
http://wysiwygwebbuilder.com/flexbox.html

lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Shopping Cart

Post by lpug » Sun Apr 08, 2018 12:49 pm

Thanks Pablo I have uploaded a test http://www.mediafire.com/file/2ik5iohf4j95ocr/test.wbs
When you preview it the items are aligned vertically but when you close the viewport they then transform to horizontal....it need to be the otherway i.e. close the viewport the items align vertically...maybe this is not how it works.

Thanks

User avatar
Pablo
 
Posts: 17606
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Shopping Cart

Post by Pablo » Sun Apr 08, 2018 3:23 pm

There are a lot of conflicts in your current layout.
For example, the table is not flexible but fixed. Also the flex grow/shrink value are set to 0, so the table will not stretch.

I think in this case it's easier if you use a layout grid instead of a flex container.
Then you also do not need the page breakpoint.

Demo:
https://www.wysiwygwebbuilder.com/suppo ... _grid.html

lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Shopping Cart

Post by lpug » Mon Apr 09, 2018 1:36 am

Thanks Pablo layout grid seems to work better. Is there an option to have padding on top and bottom of items once they respond vertically? same as the demo the items are all butted up against each other. Sorry for all the questions.

Thanks in advance.

User avatar
Pablo
 
Posts: 17606
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Shopping Cart

Post by Pablo » Mon Apr 09, 2018 5:49 am

You can add padding inside the table (like I did in the demo) or you can add padding to the grid.

lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Shopping Cart

Post by lpug » Mon Apr 09, 2018 1:18 pm

Thanks Pablo I'm talking about the padding when you make your viewport smaller and the tables align vertically on top of each other same as your demo, the tables are vertically up against each other.

Thanks

User avatar
Pablo
 
Posts: 17606
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Shopping Cart

Post by Pablo » Mon Apr 09, 2018 1:27 pm

Normally you would add margin to the object to add spacing. However, tables not support margin.
Alternatively, you can add a (transparent) line to add some spacing.

lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Shopping Cart

Post by lpug » Tue Apr 10, 2018 2:28 pm

Sorry Pablo, I've been battling with this for a while now I have attached a test project. The 4 items you see overlap as you close the viewport. I've narrowed it down that it occurs only when you have an image or a shape in each of the table top cells, if you have a 2 cell table like your demo all works well. Ive played with gutter settings,breakpoint, padding for table and individual objects with no avail.
I'll appreciate it if you can have a look....thanks

http://www.mediafire.com/file/9nb5h5pxx44885w/test.wbs

User avatar
Pablo
 
Posts: 17606
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Shopping Cart

Post by Pablo » Tue Apr 10, 2018 3:58 pm

The shapes in the table have a fixed size, so if the size of the viewport becomes smaller than the sum of the shape widths then you content will overlap.
Note that tables were not designed for this purpose, they are not a replacement for layout grids. Tables are mainly to create text columns.

lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Shopping Cart

Post by lpug » Wed Apr 11, 2018 12:20 am

Thanks Pablo, makes sense....do you have any suggestions? I have removed the tables and just put one shape in each layout cell and it still overlaps is there anything else I can try? those items will be my shopping cart.

Thanks

User avatar
Pablo
 
Posts: 17606
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Shopping Cart

Post by Pablo » Wed Apr 11, 2018 5:54 am

Shapes are no flexible, but instead you can use images and set them to 'full width'
Or maybe this is useful?
http://wysiwygwebbuilder.com/pricingtables.html

lpug
 
 
Posts: 44
Joined: Thu Apr 05, 2018 10:15 am

Re: Responsive Shopping Cart

Post by lpug » Wed Apr 11, 2018 7:55 am

That did it, full width images......thanks

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests