Responsive Breakpoints shifted in Customizer?

Hi, I am using some php to use the featured image as a kind of page hero, with navigation above. But when using the Customizer to view the results on mobile, the mobile breakpoints seem to have shifted. If I use the ones on the GeneratePress website https://docs.generatepress.com/article/responsive-display/
the tablet reacts to the css of the smartphone mode, but if I shift the breakpoints to “max 668” and “min 669 to max 1024”, the tablet in the customizer reacts to it’s CSS.

However, I don’t want to change the breakpoints just because the customizer does not work as I had expected. Does anybody have an idea what is going on, or which setting could be the culprit?

I am not aware of any CSS or any other snippets that might have changed my breakpoints…

Here’s the code (which Tom and Leo helped to put up a few years ago):

add_action( 'wp_head', function() {
    $image = get_the_post_thumbnail_url( get_the_ID() );
	$posttype = get_post_type ( get_the_ID() );

    if ( !empty($image) && $posttype == 'page' ) {
	?>
	    <style>
		.featured-image {
      		    display: none;
		}
				
		.site-header {background-image: url( '<?php echo $image; ?>' );}

		.inside-header {
		    padding: 420px;
		}

		.site-header {
		    background-size: cover;
		    background-repeat: no-repeat;
		    background-position: center center;
		}

		@media (min-width: 769px) and (max-width: 1024px) {
		    .inside-header {
			padding: 270px;
		    }
		}

		@media (max-width: 768px) {
		    .inside-header {
			padding: 90px;
		    }
		}

	    </style>
	<?php
    }
} );

Thanks for anyone helping out!

• This topic was modified 2 hours, 54 minutes ago by carobina.

The page I need help with: [log in to see the link]