@ columns on custom shop page

Support
#1

I have a site that has a custom woocommerce product page built using cornerstone


I would like to display 2 columns on mobile instead of one. I was able to get it to work on the default shop page ( http://1mission.ryanaustindesigns.com/shop/ ) but not on the one I am currently using.

#2

Hello There,

Thanks for writing in! To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media (max-width: 767px){
  .x-column.x-sm {
    float: left;
    width: 48%;
    margin-right: 4%;
  }

  .x-column.x-sm:nth-child(2n) {
    margin-right: 0;
  }
}

Hope this helps.

#3

That looks great except that some of the product titles overlap each other on mobile now.

#4

Hello There,

You will have to apply another css to adjust the font sizes of the product titles. You may update the code and use this:

@media (max-width: 767px){
  .x-column.x-sm {
    float: left;
    width: 48%;
    margin-right: 4%;
  }

  .x-column.x-sm:nth-child(2n) {
    margin-right: 0;
  }

  .x-column.x-sm h3 {
      font-size: 14px;
  }
}

Hope this helps.

#6

On the mobile view of this site, is there a way to make the product pages fill the entire width of the screen? Just on the 481px-767px and 480px & smaller views

#7

Hello @rmaustinpdx,

Thanks for updating the thread. Please add following CSS and let us know your feedback:

@media (max-width: 767px){.el11.x-container.max.width {margin: 0; width: 100%;}}

Thanks.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.