Vendor store sidebar

[roxanapaulart]

1. I have a display issue with the vendor store sidebar. It doesn’t fit in.
2. I set up [wcfm_stores per_row=”3″ per_page=”10″] but only 2 fit in. If set up to 2, only one store fit in the space.

page: https://www.collectionofcards.com/vendors/

and individual stores pages have the same issue

[WCFM Forum]

Hi,

Just checked.

Actually, your template width is too small.

DO you want to go with this?

If yes, then I will give you tweak CSS for this.

Thank You

[roxanapaulart]

Yes, thank you.
I would be grateful if you give me CSS to fix this.
All the best.

[WCFM Forum]

Hi,

Please add this CSS to your site –

#wcfmmp-stores-lists .left_sidebar, #wcfmmp-store .left_sidebar {padding: 2% 2px !important;}
#wcfmmp-stores-lists .right_side, #wcfmmp-store .right_side{padding: 2% 2px !important;width: 73%;}

And use this short code – [wcfm_stores]
3 column view will not work in such small space.

Thank You

[Roxana Paul]

Thank you, the sidebar now fits in.

The stores still cannot form 2 columns. Reducing the width in the CSS code above from 73% to 60% only moves the content to the right side. That creates a big margin on the left, but the second column is empty.

[WCFM Forum]

HI,

Do not change that CSS to 60%

add this css as well –

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-2 {
    width: 45%;
}

Thank You

[Roxana Paul]

Great, thank you very much. Now it looks wonderful on the computer screen. Is there any way to align it on the mobile screen? Somehow it all falls to the right side.

[WCFM Forum]

Hi,

Please add this responsive CSS after previously added CSS –

@media (max-width: 767px) {
#wcfmmp-stores-lists .right_side {
    width: 100%;
}
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li {
    width: 93% !important;
}
}

Thank You

[Author]

Posts