How to hide menu on mobile and tablet views

Hi,

I am using Elementor to design my menu for my website. To avoid having 2 menus displayed on each page, I need to hide the menu that is displayed by default with generatepress.
Following what was described in an other topic, I went to customize/layout/primary menu/navigation location and chose "no navigation". That worked great ON DESKTOP VIEW, the generatepress menu disappeared. But when I switch to MOBILE or TABLET VIEWS, the menu is still here, even when No navigation is chosen for those views too.

Leo recommended to add the CSS:
@media (max-width: 768px) {
.main-navigation {
display: none;
}
}

This didn't work.
(However my knowledge with CSS and coding in general is very low, so I will awkwardly specify that I copied this CSS and simply pasted it in the Customize/additional CSS tool that Wordpress offers. I guess that should have worked??)

Any other suggestion?

Thank you for your help!

Magali