Mobile Homepage Edit CSS


(Fellowship Forums) #1

Hi,

I am trying to make some edits to the mobile version of my forum. I think that they can be done via CSS, and I’ve done some searching through the Meta, but I can’t quite figure it out.

  1. I am trying to hide the “uncategorized” category from the homepage. I’ve tried the following but it is not working:

category-uncategorized {
display: none;
}

  1. I would like to hide the ‘# total’ posts.

Thanks.


#2

Try this out in your Mobile CSS:

.category-list div[data-category-id="1"] { 
   display: none; 
}

.category-list-item>footer figure {
   display: none;
}

(Fellowship Forums) #3

Worked perfectly! Thank you @tshenry.


(Fellowship Forums) #4

@tshenry Right now the mobile homepage has a lot of white space on it. Do you know how I could design the homepage so the icons appeared in a 2x2 square? I think this would better utilize the space.

So that it appears something more like this:

Note that the code used to get the Learning Objectives subcategories to appear this way is:

.categories-list.category-syllabus-material {
.category-boxes .category-box {
width: 48%;
margin: 0 1% 1.5em 1%;
}
}

.categories-list.category-past-exams {
.category-boxes .category-box {
width: 48%;
margin: 0 1% 1.5em 1%;
}
}

.categories-list.category-case-study {
.category-boxes .category-box {
width: 48%;
margin: 0 1% 1.5em 1%;
}
}


#5

Try replacing the code that I had originally posted above with the following to accomplish everything mentioned so far. I think this should do it, but please test it to make certain.

.category-list {
    div[data-category-id="1"] { 
        display: none; 
    }
    .category-list-item>footer figure {
        display: none;
    }
    .category-list-item {
        border-left: none;
        display: inline-block;
        max-width: 170px;
    }
    .category-logo {
        max-height: 170px;
    }
    .subcategories-list {
        display: none;
    }
}

Edit: Accidentally mixed in some older copy and pasted stuff. Fixed now. Also, you can try replacing the max-width: 170px; under .category-list-item with width: 48%; and see if you like that better.


(Fellowship Forums) #6

Thanks so much for the code!

I’d like the boxes to be as big as possible (2x2 format) regardless of the resolution on the phone. I noticed when having the max width as a fixed pixel count, it may not load as 2x2 on smaller phones. But when doing 48% width, the boxes appear quite small and spaced out (on my phone at least) unless we bump up the max-height to 220px. I don’t have a smaller phone on me at the moment to test that out.

Is there a recommendation for height and width that will best optimize it for the phone at which the website is being viewed on?


#7

No problem :slightly_smiling_face:

If you want them to be as big as possible, I would go with the 48% width, then you can actually just set the category-logo to max-height: none;

Try that out and see what you think. It’s going to make them quite large if your phone is oriented horizontally, but it will be 2x2 and as big as possible.