Wordpress - Optimizing Mobile Layout in AVADA: Maintaining 4 Columns on Desktop and Displaying 2 Columns on Mobile Devices

LucaDiFerdinando
December 15, 2023
78 views
0 votes
2 Answers

In WordPress, using the AVADA theme, a site configured with four columns defaults to a single-column layout on mobile devices. Conversely, configuring the site with six columns results in a two-column layout on mobile. The objective is to maintain a four-column configuration while achieving a two-column display on mobile devices.

the product display must be 4 columns desktop and 2 columns mobile. orders are managed by woocommerce

Tags: wordpress

Answers

Chosen as BEST ANSWER
- LucaDiFerdinando
- December 15, 2023 at 3:58 pm
- 0 votes
0
you can modify the code based on the selector used on my site https://sinergiafd.com/sinergia/index.php/accessori-per-calzature-2/ I added the code to see two columns in mobile mode but it only works if I'm logged in to the site

I can not understand

I paste the code I used, please help me
```
@media screen and (max-width: 570px) {
    
    
.product-title.fusion-responsive-typography-calculated {
     font-size: min(11px, var(--h3_typography-font-size)) !important;
}
```
enter code here
```
     .woocommerce.columns-4 ul.products {
         display: flex;
         flex-wrap: wrap;
     }
     .woocommerce.columns-4 ul.products li.product {
         flex: 0 0 50%;
         box-sizing: border-box;
         margin: 0;
         padding: 5px;
         height: car;
         overflow: hidden;
     }
     .woocommerce.columns-4 ul.products li.product img {
         width: 100%;
         height: car;
     }
}
```

(Edit)

- FahadAziz
- December 14, 2023 at 12:15 pm
- 0 votes
0
You can do that by using CSS media query,
```
 @media only screen and (min-width: 768px) {
 .your-column-cls {
  width: 25%; 
  }
  }

  /* Two columns on smaller screens (mobile) */
  @media only screen and (max-width: 767px) {
  .your-column-cls {
   width: 48%
   }
  }
```
Please replace this class with your exact class which your using for the column "your-column-cls".
Login or Signup to reply.