ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• April 22, 2015 at 9:04 am #167163
  serieux

  Member

  Post count: 112

  hi,

  How can I set the default shop mode/view on mobiles to the small boxes (see photo).

  So when clicking shop the open it up straight to that mode

  Attachments:

  You must be logged in to view attached files.
  April 22, 2015 at 12:48 pm #167315
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi there,

  Add this custom css, and it will display grid layout on first load of mobile shop:

  @media only screen and (max-width: 479px) {
  .woocommerce .products .product {
    width: 50%;
    float: left;
  }
  }

  Hope that helps!

  – Ed

  April 23, 2015 at 6:30 am #167515
  serieux

  Member

  Post count: 112

  Thanks Ed!

  April 23, 2015 at 6:49 am #167518
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Great, thanks Ed

  November 10, 2015 at 10:45 am #227344
  serieux

  Member

  Post count: 112

  Hi Ed,

  }
  @media only screen and (max-width: 479px) {
  .woocommerce .products .product {
  width: 50%;
  float: left;
  }
  }

  Is not working for me anymore?

  Any ideas?

  Thanks

  November 10, 2015 at 10:49 am #227345
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Have you edited/added any custom css since?

  – Kyle

  November 10, 2015 at 12:00 pm #227390
  serieux

  Member

  Post count: 112

  This is the current List of Custom CSS. But Removed these all but the one i need, and deactivated all plugins except swift and woo commerce and still doesn’t work.

  Thanks

  }
  @media only screen and (max-width: 479px) {
  .woocommerce .products .product {
  width: 50%;
  float: left;
  }
  .order-actions .button {
  background-color: #000!important;
  color: #fff!important;
  font-size: 14px!important;
  }

  .showlogin,.showcoupon,p.terms a{
  text-decoration: underline !important;
  }
  .top-author-info, .author, .blog-item-details span.author, .author-info-wrap {
  display: none !important;
  }
  .post-details-wrap {
  width: 100%!important;

  }
  @media only screen and (max-width: 767px) {
  .woocommerce span.onsale, .woocommerce .wc-new-badge, .woocommerce .out-of-stock-badge {
  display: block;
  }

  #one-page-nav li i{
  background:#252525 !important;
  }

  .order-actions .button {
  background-color: #454545!important;
  color: #fff!important;
  font-size: 14px!important;

  November 10, 2015 at 12:16 pm #227400
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Remove the closing tag } from the top, and add one to the end to close the last rule

  – Kyle

  November 10, 2015 at 12:32 pm #227410
  serieux

  Member

  Post count: 112

  Hi, still not working, please see below updated:

  @media only screen and (max-width: 767px) {
  .woocommerce .products .product {
  width: 50%;
  float: left;
  }
  .order-actions .button {
  background-color: #000!important;
  color: #fff!important;
  font-size: 14px!important;
  }

  .showlogin,.showcoupon,p.terms a{
  text-decoration: underline !important;
  }
  .top-author-info, .author, .blog-item-details span.author, .author-info-wrap {
  display: none !important;
  }
  .post-details-wrap {
  width: 100%!important;
  }

  @media only screen and (max-width: 767px) {
  .woocommerce span.onsale, .woocommerce .wc-new-badge, .woocommerce .out-of-stock-badge {
  display: block;
  }

  #one-page-nav li i{
  background:#252525 !important;
  }

  .order-actions .button {
  background-color: #454545!important;
  color: #fff!important;
  font-size: 14px!important;
  }

  November 10, 2015 at 12:37 pm #227415
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Change to:

  .woocommerce .products .product {
    float: left!important;
    width: 50%!important;
  }

  – Kyle

  November 10, 2015 at 12:44 pm #227418
  serieux

  Member

  Post count: 112

  Hi,

  That worked perfectly, except for one issue, now i can’t use the the zoomed big product view.

  Is there any way I can still be able to click the big box view where its just one product scroll, but have this view as default?

  Thanks

  November 10, 2015 at 12:45 pm #227419
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  I’m afraid not sorry, will see if we can have the option to chose a default layout for mobile but with the layout options to still work

  – Kyle

  November 10, 2015 at 12:46 pm #227420
  serieux

  Member

  Post count: 112

  Kyle that would be amazing!

  Thanks

  November 10, 2015 at 12:49 pm #227421
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Will add to the list

  – Kyle

  November 10, 2015 at 1:29 pm #227437
  serieux

  Member

  Post count: 112

  Hi Kyle,

  How can I add the word ‘View type’ next to the view types (see attached)

  Thanks

  Attachments:

  You must be logged in to view attached files.
• Back to forum

  Posted in: Atelier