Reply 335903 to: How can I display 2 categories in one row of mobile view

Avatar: Tony Rodriguez
Tony Rodriguez
Support staff
October 6, 2022 at 08:18

Hello, @Saira,

1- In the widget, there is no option to set the specific column settings for mobile and desktop. So to solve this you have to use the custom CSS code.

To set the CSS code first you have to know that the category will appear on multiple pages of your site. If you set the code using default category classes it will affect all the categories on your site. So, to set the code only for a specific section first set the “CSS ID” on the widget/element as I did: https://postimg.cc/vDLP3Vx2 I name the ID “Test” so that now I will use the default category class with this ID then my code will only work for this section. This is the default CSS class for the category “.category-grid” and I set the ID “Test” so with the ID and class the code will be like this.

@media(max-width:768px){
#Test .category-grid{width:50% !important;}}

As you can see from the above code I set my ID with the category class just like this you can do it on your site.

2- To know how to set the overlay color on the product category widget of our theme please watch this video complete: https://streamable.com/jy6iw0

Regards 8Themes Team.

Go To The Whole Conversation In Topic
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.