Display category on mobile and date on browser

glamsalad · Member · May 1, 2017 at 1:10 pm
Copy link

Add topic to favorites
Hi there,

When you scroll through home on my website, it originally displayed the “date,” “category,” and “Leave a comment” on desktop. On mobile it only displayed the date and leave a comment.

It was very important to me that the category be visible on mobile so I added this to my CSS:
.cat-links {
display: inline-block !important;
}

span.posted-on {
display: none;
}

.cat-links::before {
display: none;
}

Is there a CSS code I can add which would show category+leave a comment on mobile and show the date+category+leave a comment on desktop?

TIA!

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · May 2, 2017 at 7:53 am
Copy link
Hello @glamsalad,
You are almost there, just use media queries to target mobile devices and move span.posted-on inside the media query, like this:

/*CSS for devices below 1000px width*/
```
@media only screen and (max-width: 1000px) {
  span.posted-on {
     display: none;
  }
}
```
And also, remove this code:
```
.cat-links::before {
display: none;
}
```
It is redundant.

Hope this helps 🙂
glamsalad · Member · May 2, 2017 at 3:17 pm
Copy link
Hi, When I did what you wrote, the date was apparent on mobile as well as desktop.

I want date / category / leave a comment to appear on desktop and category / leave a comment to appear on mobile.

Would you be able to send me the complete CSS code to insert? I’ll remove the one I wrote originally.

Thanks!
otpidusprime · Member · May 3, 2017 at 8:17 am
Copy link
@glamsalad okay do this, remove/comment out all your CSS code.

I mean remove these:
```
.cat-links {
  display: inline-block !important;
}

span.posted-on {
  display: none;
}

.cat-links::before {
  display: none;
}
```
This will undo all your changes so that the date, category and leave comment will be visible on all devices.

And then, use this to hide, just the date on devices below 1024px width(mobile devices), so that only category and leave a comment will be visible on mobile:
```
@media only screen and (max-width: 1024px) {
  .posted-on {
     display: none !important;
  }
}
```
Let us know if it helps 🙂
glamsalad · Member · May 3, 2017 at 1:30 pm
Copy link
This code came out well on desktop but on mobile devices it took off both the date & category – leaves just the comment part.

How do I hide just the date on mobile devices?
otpidusprime · Member · May 3, 2017 at 3:20 pm
Copy link
Okay, that should not happen because
category is using the class cat-links and i used display: none; for just posted-on

Can you tell me which page or post you are looking at when you apply that code? I am looking here: https://glamsalad.com/ which not contains only category and leave a comment text. Are you looking at the same page too?

If yes, then please add that code, save and leave it like that so that i can take a look at what’s happening and provide you with corrections(if there are any).

Thanks! 🙂
otpidusprime · Member · May 3, 2017 at 3:21 pm
Copy link
CORRECTION:
which contains only category and leave a comment text*
glamsalad · Member · May 3, 2017 at 4:05 pm
Copy link
I deleted the old cat-links code and inserted just this:

@media only screen and (max-width: 1024px) {
.posted-on {
display: none !important;
}
}

Now, check out the site on mobile and you’ll see what I mean that only Leave a Comment appears.
otpidusprime · Member · May 3, 2017 at 4:59 pm
Copy link
Okay, i checked your site and understood what you meant. So there’s this additional CSS code on your theme:
```
@media screen and (max-width: 600px) {
   .entry-meta > span:nth-child(3) {
      display: none;
   }
}
```
Which hides the category on devices with width below 600px. So to override that, add this CSS code:
```
@media screen and (max-width: 600px) {
   .cat-links {
       display: inline-block !important;
   }
}
```
This will display the category along with the leave a comment text on mobile devices

Hope this helps now 🙂
glamsalad · Member · May 8, 2017 at 7:32 pm
Copy link
Almost perfect! Except on mobile it showed the category with a “/” before it. It looked like this:

/ in 101 / leave a comment

How do I remove that? It should just be on mobile
In 101 / Leave a Comment
otpidusprime · Member · May 9, 2017 at 7:57 am
Copy link
@glamsalad i see that you removed the date and also were able to remove the slash “/” before the categories.

Do you still need help with this?
glamsalad · Member · May 9, 2017 at 11:03 am
Copy link
Yes please, I would really like to display the date + category + comment on desktop and just the category & leave a comment on mobile without the slash before the category.
otpidusprime · Member · May 9, 2017 at 11:04 am
Copy link
@glamsalad okay, can you please restore the codes with the codes i gave above so that i can provide you the correct CSS code to hide the slash?
glamsalad · Member · May 12, 2017 at 2:12 am
Copy link
I added these two and I’m not sure why it hasn’t updated, it shows date / category / comments on both mobile and desktop.

@media screen and (max-width: 600px) {
.cat-links {
display: inline-block !important;
}
}

If I insert these two, it’s supposed to show everything on desktop and just category/comments on mobile?

@media only screen and (max-width: 1024px) {
.posted-on {
display: none !important;
}
}

@media screen and (max-width: 600px) {
.cat-links {
display: inline-block !important;
}
}
glamsalad · Member · May 12, 2017 at 2:16 am
Copy link
Actually, it just updated – if you can check it out on mobile and desktop.

Thanks!!

otpidusprime · Member · May 12, 2017 at 7:30 am

Okay… notice this code?

@media only screen and (max-width: 1024px) {
    .posted-on {
        display: none !important;
    }
}

Just add this to the above code:

.cat-links:before {
    display: none;
}

After adding this, your final code should look like this:

@media only screen and (max-width: 1024px) {
    .posted-on {
        display: none !important;
    }

    .cat-links:before {
        display: none;
    }
}

Hope this helps 🙂

glamsalad · Member · May 12, 2017 at 12:55 pm
Copy link
Just updated it and that removed the category completely from mobile.

This was my final code:

@media only screen and (max-width: 1024px) {
.posted-on {
display: none !important;
}

.cat-links:before {
display: none;
}
}
otpidusprime · Member · May 13, 2017 at 9:46 am
Copy link
@glamsalad It’s not because of this recent code, you removed the code i gave you long time back right?
```
@media screen and (max-width: 600px) {
   .cat-links {
       display: inline-block !important;
   }
}
```
This one? This caused the category to force display on mobile devices, remember?

Add this.
glamsalad · Member · May 14, 2017 at 1:22 am
Copy link
Ah, wonderful!! Yes, I added it and now it’s perfect.

Thank you so much @optidusprime, I really appreciate your help.
otpidusprime · Member · May 14, 2017 at 8:20 am
Copy link
@glamsalad glad i could help 😇

The topic ‘Display category on mobile and date on browser’ is closed to new replies.

Display category on mobile and date on browser

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media