How to configure a different number of columns in the mobile version?

  • Resolved xlust

    (@xlust)


    10 months ago

    Hello, I am using your plugin on my website. I’m interested in this question. I configured the desktop version to display three columns in the plugin settings, but on a mobile device with a small screen it appears too compressed. Is it possible, using a special code, to display a width of three columns on the desktop version, and two columns on the mobile version? Because in the plugin settings there is no way to adjust the number of columns for the mobile version.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Vanesa

    (@vanesarodriguez)

    Hi there,
    I hope you are doing well ??

    Please, try adding the following CSS in Appearance-> Customize -> Additional CSS:

    
.options.default-closed.per-row-3.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .options.default-closed.per-row-3.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.yith-wapo-block .yith-wapo-addon .options.grid.per-row-3 .yith-wapo-option{
  width: auto;
}

    Try it and let us know.
    We remain at your disposal.

    Thread Starter xlust

    (@xlust)

    Thank you very much for your help! Yes, your code works!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to configure a different number of columns in the mobile version?’ is closed to new replies.