Shop page 2 product columns on mobile

  • Resolved TokoDaring.Com

    (@wpjakarta)


    4 years, 11 months ago

    Hello,
    may someone guide me how to make 2 column on mobile view of woocommerce shop page ?

    i know also i actualy must point this problem to the support of my theme, but i’m unable to reach them. also there are so many same topic to my concern, but no one fixed my problem even i make some adjustment to my selector and css props of my theme

    conclusion, im really headache while my effort didn’t result what im looking for my shop page.

    hoping someone from Woocommerce expert to fixed my problem

    again, thank you very much.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Hey there!

    Since this is quite a bit more involved than a couple lines of CSS, it’s not really likely that someone will have the answer here for you. You are correct, the theme support is the best place to look for this help, as they are the best suited to changing all that needs to be changed.

    I’ll leave this open in case someone wants to chime in with other suggestions.

    Have a great one!

    Hi

    Use this style, maybe work:

    <style>
@media only screen and (max-width:768px) {
    .woocommerce-page ul.products li.product{width:50px}
}
</style>

    Good luck

    Thread Starter TokoDaring.Com

    (@wpjakarta)

    Hello & thankyou @yazdaniwp
    I tried that code but unfortunately still didn’t work

    On mobile view the screen divided by half, but the right side still empty. The 2nd product not floating on right side

    Hello

    Sorry you are right;
    Please use this one:

    <style>
@media only screen and (max-width:768px) {
    .woocommerce-page ul.products{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
         flex-flow: row wrap;
    }
    .woocommerce-page ul.products li.product{
         flex: 0 0 50%;
         -webkit-box-flex: 0;
         padding: 10px;
    }
}
</style>

    Good luck

    Thread Starter TokoDaring.Com

    (@wpjakarta)

    @yazdaniwp i owe you. thank you for your time to this perfect code, your code work well as my expect.

    @slash1andy thank for your wisdom let this thread open on your plugin page until i found a great help from @yazdaniwp

    Well done!

    You are welcome ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Shop page 2 product columns on mobile’ is closed to new replies.

Tags