Here is my CSS changes to improve the Mobile View.
I absolutely love this theme, but noticed some little minor odd bits, so I also added the following CSS to make it look a little nicer in my perspective. I hope this helps someone else with the same preferences.
Here is the Original (Unedited)
Note the following in the picture above:
The number 1 which represents the Replies is to far to the left.
The topic bubble is slightly overlapping the blue background.
There is no padding between all the content and the blue background.
The blue background does not look nice in the category page. I love it on the home page though.
Here is the CSS code I added in the Mobile tab.
/* Add some padding to the Category, Sub-Category, Tags, searc, latest, new topic, and notification area*/
.list-controls {
padding: 5px;
}
/* Adds some padding to the Topics area */
div#list-area {
padding: 6px;
}
/* Aligns the Replies number more to the right */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
float: right;
}
Updated (After adding the CSS)
If you too, prefer to remove the blue background, here is the code to only remove it from the category pages.
/* Removes the blue background for category only */
html .category .background-container {
background: #fff;
clip-path: none;
}
On mobile, there is a Category dropdown. When clicked and either Latest, Unread, or Top is selected, you cant select Categories from the dropdown again.
1.Before
2.When the dropdown menu is clicked
3.After you click
4. Dropdown menu (missing Categories)
At this point, a user is unable to select the dropdown and choose Categories again.
I am having an issue with featured topics component not showing the cards. I would like to also have the option to have it only show featured topics within specified categories. Which in theory it should or even in the variants based on the official one.