[Resolved] Additional CSS not working in mobile

[Jayanta]

Hi,
Have tried to use GeneratePress with WP Show Posts to create a “magazine” style. While most of the customizations are done, I am finding it difficult to achieve the following. Can you kindly help?

1. Hide Secondary Navigation in Mobile only is not working. Using the below code in Additional CSS:

/*Hide Top Nav in Mobile*/
@media (max-width: 768px) {
    .secondary-navigation {
        display: none;
    }
}
/*END*/

2. Author image in single post meta is not properly formatted in MOBILE. Using the below code in Additional CSS. The | between the author name and the date is also not shown

/*added for author image in byline and the | sign  */
.entry-meta .avatar {
    width: 25px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 5px;
}
 
.entry-meta span:not(:last-child):after {
    content: '|';
    margin: 0 5px;
}
 
/*END*/ 

[David]

Hi there,

for the Secondary nav, change:

.secondary-navigation

to:

#secondary-navigation

For the other issue, try moving that CSS to top of your CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jayanta]

Hi David, the problem is solved.

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts