Logo and Title size do not change with small screens

Your selectors are not right for the HTML attributes in use. Try .wp-block-site-logo img and .wp-block-site-title a instead.

To override the default changeover width you’d need to include overriding media queries that load after the default /navigation/style.min.css styles. Styles from theme.json ought to be after the default, so you only need to ensure you use the same selectors as default so precedence is equivalent other than which occurs after the other. For example, the default rule for the hamburger icon is:

@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display:none
    }
}

Add your own rule, except use 780px as the min-width.

The problem now is the 600px rule will still apply between 600 and 780px. I believe if you change min-width: 780px to max-width: 779px it ought to override any min-width rules that are less than 779px.

Thanks @bcworkz , I get the point now. The instructions for the logo and title worked perfectly.

A question: it change anything if I insert my custom css in the blocks section like this:

{
"styles": {
blocks: {
"core/site-title": {
"css": " @media (max-width: 780px) { ... } "
}
}
}
}

The switchover of the navigation icon still does not work, I think I need more time to test your solution.

Sorry, I’m not knowledgeable enough about block JSON syntax to answer your question. I recommend using your browser’s element inspector tool to investigate. Any CSS rules applied to a particular element ought to show up, whether it is applied or not. If your added CSS does not show up at all, there’s something wrong with your syntax. If it appears but is not applied (your CSS is struck through in the tool), then it has inadequate precedence to be applied. You then either need greater precedence; or, if the same selectors are used as the applied rule, your rule needs to appear later in the page load sequence.

Good, thanks again for your patience ??