Return to previous page

Demo theme, the categories appear in 2 columns. However on the importered demo, it only shows in one

This topic has 9 replies, 4 voices, and was last updated 4 weeks ago ago by Rose Tyler

Terpsauce

Participant

February 24, 2025 at 23:31

Two screenshots. Shows the category section on the home page.

1 image shows the demo theme, the categories appear in 2 columns. However on the importered demo, it only shows in one column on mobile, with no option to change columns on mobile alone. Column change settings is global. Desktop version is fine do NOT change it .

Please ensure that the categories are also contained in the centre of the page (this means “aligned centre), in 2 columns.

Thanks

Files is visible for topic creator and
support staff only.

#435240 Copied Theme version: 9.4.7

8 Answers
Jack Richardson

Support staff

February 25, 2025 at 14:14
Dear @Terpsauce,

Thank you for reaching out to us.

Currently, the widget does not have built-in responsive column options. However, we recommend adding the following custom CSS to achieve the desired layout:

Path: “Home Page Editor → Categories Widget → Advanced Tab → Custom CSS

@media only screen and (max-width: 480px) { selector .categories-lists-grid .category-list-item-wrapper { width: 50% !important; } }

Additionally, we will review this matter globally using the demo import and implement a fix accordingly.

Please let us know if you need any further assistance.

Best regards,
Jack Richardson
8Theme Team
#435318 Copied
Terpsauce

Participant

February 26, 2025 at 04:06

Hello, I applied the code. Please see screenshot, it’s still a bit untidy.

Still aligned to left (not centered)

Files is visible for topic creator and
support staff only.

#435404 Copied

Terpsauce

Participant

February 26, 2025 at 04:25

Hello, I fixed the alignment using the padding.

However there doesn’t appear to be any option to set alignment for the parent categories text, or the subcategories text, so still experiencing some untidyness.

Would it be possible to have the categories texts as follows.

Left column, align to left. Right column, align to right. I think this would be the best result for look.

Files is visible for topic creator and
support staff only.

#435405 Copied

Terpsauce

Participant

February 26, 2025 at 05:10

Update: unfortunately the method of padding I used changed the size of the icons on mobile and desktop so had to be reverted.

Please advise how to ensure they are aligned centre (currently aligned left)

#435407 Copied

Terpsauce

Participant

February 26, 2025 at 08:22

Update 2. I re-applied try css, it no longer changed anything , I also noticed a little error flag on the code area, relating to the use of “!important”

The picture attached shows the css, but the change is only showing on the builder, no the main site.

Files is visible for topic creator and
support staff only.

#435415 Copied
Andrew Mitchell

Support staff

February 26, 2025 at 16:53
Hello, Terpsauce,

We have applied the following CSS to the element. Kindly check its appearance now:

selector .categories-grid { margin-left: 30px; }

Please let us know if any further adjustments are needed.

Best regards,
8Theme Team
Files is visible for topic creator and
support staff only.
#435514 Copied
Terpsauce

Participant

February 27, 2025 at 03:17

Thanks, it still needs some slight adjustments because of the icon position, parent and sub categories positions, it doesnt appear fully centred. however the changes might be best demonstrated with photoshop. I don’t have it at the moment because im waiting on a replacement Mac and currently using a borrowed device.

#435571 Copied

Rose Tyler

Support staff

March 3, 2025 at 13:52

Hello, Terpsauce,

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best regards,
8Theme’s Team

#436032 Copied
Viewing 9 results - 1 through 9 (of 9 total)