Additional CSS not working in mobile

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*/