The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 03-12-2020, 11:21 PM
Paul Townley-Jones's Avatar
Paul Townley-Jones is offline
Junior Member
 
Join Date: Mar 2020
Posts: 2
Arrow

List products vertically like a menu


Hi

I have a client who runs a food catering business and as part of the look and feel of their site they want to list their food items vertically as if you were looking at a menu. They have been able to achieve this currently on Wix here, but they want to move off Wix now.

So I am developing their new site design here and on that linked page you can see my Ecwid integration. The products flow left to right but what CSS do I use that will simply list the products vertically one per line like on Wix?

Second, by listing the items vertically this will move the Track Orders | My Order | Sign In buttons far down the bottom of the page. How can I move these to a right column like the Wix example, or move them to the top at least.

Thanks
Paul
  #2  
Old 03-16-2020, 12:05 PM
Wade D.'s Avatar
Wade D. Wade D. is offline
Ecwid Team
 
Join Date: Dec 2018
Posts: 19
Default

Hi Paul,

This is Wade from Ecwid Customer Care team. Thank you for your message!

I've checked your new website and see that you've already added some CSS to its custom theme to make the products being displayed as a list.

In case you still need assistance with this, I've prepared the CSS code that might improve this. I also included the code to move the footer section (the "Track Orders | My Order | Sign In" buttons) to the top of the store. Feel free to check it out:

Code:
/*Display products as list*/
.ec-size .ec-store .grid__products {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store .ec-grid .grid__wrap .grid__products .grid-product {
    width: 70%;
    margin: 0 auto;
}
.ec-size .ec-store .grid__products .grid-product .grid-product__wrap-inner {
    flex-direction: row;
}
.ec-size .ec-store .grid__products .grid-product .grid-product__wrap-inner a {
    width: 33%;
    margin: 0 auto;
}
.ec-size .ec-store .grid__products .grid-product .grid-product__wrap-inner .grid-product__image {
    width: 200px;
}

/*Move the footer section to the top*/
.ec-size .ec-store .ec-store__content-wrapper {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store .ec-store__content-wrapper .ec-footer {
    order: -1;
}
  #3  
Old 03-23-2020, 08:17 AM
Kyla Watson's Avatar
Kyla Watson Kyla Watson is offline
Junior Member
 
Join Date: Mar 2020
Posts: 5
Default

Wade, appreciate your answer!
  #4  
Old 03-23-2020, 06:08 PM
Paul Townley-Jones's Avatar
Paul Townley-Jones Paul Townley-Jones is offline
Junior Member
 
Join Date: Mar 2020
Posts: 2
Default

Hi Wade, Thanks for your answer. I do like how you have moved the price to be on the same line as the product.
The products are now aligned a little oddly however (they were aligned left but are now sort of in the centre or have moved right).
My client doesn't have images for all the products so I've hidden them - how do I make the 'menu' of products align more naturally?
Thanks
Paul
  #5  
Old 03-26-2020, 02:12 PM
Lucy L.'s Avatar
Lucy L. Lucy L. is offline
Ecwid Team
 
Join Date: Dec 2018
Posts: 20
Default

Hey there!

This is Lucy from the Ecwid Customer Care Team. Thank you for contacting us. I’d be happy to help you!

I see Wade made a code for your site. I also see the links you gave in the first post aren't working anymore. Maybe you moved the site?

Please, send us the links to your client's site so we could check.
Thanks in advance!
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
vertical, vertical display, vertical layout

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:32 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.