Your account expired support, please renew to get your support.
Renew support on the EnvatoCheck the license on the Envato

Home › Forums › Themes Support › Claue › One column layout on Mobile Product Listing

Topic Resolution: Resolved
Viewing 8 reply threads
Save
  • Author
    Posts
    • January 27, 2021 at 8:35 pm #40233
      seventalents
      Support Expired

      Is it possible One Column Layout on mobile versione of Product Listing?

    • January 27, 2021 at 9:41 pm #40236
      Harry
      Support Expired

      Hi,

      Please add below code to Claue > Theme Option > General Layout > Custom CSS

      @media only screen and (max-width: 736px) {
.jas-col-xs-6.jas-col-md-6, .jas-masonry .jas-col-xs-6.jas-col-md-6 {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}}

@media only screen and (max-width: 480px) {
.products .jas-col-xs-6:first-child, .products .jas-col-xs-6:nth-child(2n+1), .products.jas-masonry .jas-col-xs-6:nth-child(2n) {
	padding-right: 1rem;
}
.products .jas-col-xs-6:nth-child(2n), .products.jas-masonry .jas-col-xs-6:first-child, .products.jas-masonry .jas-col-xs-6:nth-child(2n+1) {
	padding-left: 1rem;
}}

      Kindd regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 27, 2021 at 9:50 pm #40238
      seventalents
      Support Expired

      I have added the code to Claue > Theme Option > General Layout > Custom CSS, but it doesn’t work.

    • January 27, 2021 at 9:51 pm #40239
      Harry
      Support Expired

      The account you sent can’t access dashboard I can’t see your site, please check and send me again.

      Thanks

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 27, 2021 at 10:06 pm #40240
      seventalents
      Support Expired

      try now

    • January 27, 2021 at 10:21 pm #40242
      Harry
      Support Expired

      Hi,

      Please change code to 

      @media only screen and (max-width: 736px) {
.jas-col-xs-6.jas-col-md-4, .jas-masonry .jas-col-xs-6.jas-col-md-4,
.jas-col-xs-6.jas-col-md-6, .jas-masonry .jas-col-xs-6.jas-col-md-6 {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}}

@media only screen and (max-width: 480px) {
.products .jas-col-xs-6:first-child, .products .jas-col-xs-6:nth-child(2n+1), .products.jas-masonry .jas-col-xs-6:nth-child(2n) {
	padding-right: 1rem;
}
.products .jas-col-xs-6:nth-child(2n), .products.jas-masonry .jas-col-xs-6:first-child, .products.jas-masonry .jas-col-xs-6:nth-child(2n+1) {
	padding-left: 1rem;
}}

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 27, 2021 at 10:38 pm #40244
      seventalents
      Support Expired

      Thanks Harry, now it works!!

      Besides could you tell me how increase the size of the highlighted attached select?

      The phrase “Ordinamento … (order by…)” is trunked on mobile version (see screenshot)

      Attachments:
      You must be logged in to view attached files.
    • January 28, 2021 at 10:11 am #40248
      Harry
      Support Expired

      Hi,

      Please add more code to Claue > Theme Option > General Layout > Custom CSS

      @media only screen and (max-width: 384px) {
.woocommerce-ordering select {
	width: 100%;
}}

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • January 28, 2021 at 7:32 pm #40251
      seventalents
      Support Expired

      Perfect! Thanks!

  • Author
    Posts
Viewing 8 reply threads
Save

You must be logged in to reply to this topic.