Return to previous page

Improving Mobile Homepage Category Layout

This topic has 8 replies, 3 voices, and was last updated 3 months, 2 weeks ago ago by Andrew Mitchell

Sweet D

Participant

January 15, 2024 at 15:13

Dear Support Team,

I’m writing to request assistance in improving the layout of my website’s homepage categories on mobile devices.

Currently, when viewed on a mobile phone or tablet, the homepage categories appear one at a time, stacked vertically. While this works on desktops, it feels restrictive and visually unappealing on smaller screens.

I believe that displaying the categories in two columns on mobile would significantly enhance the user experience. This would allow users to browse through them more easily and efficiently, ultimately improving engagement and navigation on the go.

I’d be grateful if you could guide me on how to achieve this two-column layout. Is there a built-in option within the website platform or theme settings to control the mobile layout of elements?

#379961 Copied Theme version: 9.2.5 WooCommerce version: 6.4.2

7 Answers
Luca Rossi

Support staff

January 16, 2024 at 16:30
Dear @Sweet D,

We are pleased to inform you that we have successfully duplicated the Product Categories Element to enhance the user interface across different devices. The desktop version now utilizes a 4-column layout, while the mobile version is configured to display 2 columns for optimal viewing.

Furthermore, we have implemented the following CSS code to ensure proper formatting:
```
.categories-grid.row .category-grid.col-xs-12.col-sm-6.columns-2 {
    flex-basis: 50%;
}
```
We believe the adjustments have improved the overall presentation. Could you kindly review the changes at your earliest convenience and confirm that everything meets your satisfaction?

Thank you for your attention to this matter.

Warm regards,
The 8Theme Team
#380116 Copied
Sweet D

Participant

January 16, 2024 at 17:54

Yes, that looks much better thank you. The only thing is that the top right category ‘Arrangements’ – The category name that appears in front of the category picture, the word is too long and strangely writes over itself.

#380135 Copied

Luca Rossi

Support staff

January 17, 2024 at 04:13

Hi @Sweet D,

We’ve added the following custom CSS to break the texts and applied the background color so they’re more readable on mobile:

https://prnt.sc/Hn1YH9eZEP0q

Can you please check?

Warm regards,
The 8Theme Team

#380156 Copied

Sweet D

Participant

January 18, 2024 at 18:59

That’s much better thank you.

There are still some words that have a line break in the middle of the word. Is it possible to only have line breaks in between words?

#380496 Copied
Luca Rossi

Support staff

January 19, 2024 at 05:24
Hi @Sweet D,

We’ve changed the CSS from:
```
word-break: break-all; //all characters will be break to new line.
```
To
```
word-break: break-word; //words will be break to new line only.
```
Can you please check again?

Thank you!
#380521 Copied
Sweet D

Participant

January 19, 2024 at 13:44

It looks great. Thanks for your help.

#380595 Copied

Andrew Mitchell

Support staff

January 19, 2024 at 13:54

Dear Sweet D,

Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

Click here to share your insights: https://themeforest.net/downloads

Your support fuels our journey, and we appreciate it more than words can express.

Best Regards,
The 8Theme Team

#380598 Copied
Tagged: boost mobile ecommerce performance, enhance woocommerce mobile view, improve mobile homepage, optimize category layout, responsive woocommerce design, wordpress woocommerce templates
Viewing 8 results - 1 through 8 (of 8 total)