css media query to target all mobiles and desktop

Question

I am trying to get the media queries to work but can't seem to have a general working version. This is what I got, two queries for mobile devices (email footers) and one for the desktop. The last one works fine.

HEAD

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS

#mobileVersion, #desktopVersion {display:none}

/* markup for tablets */
@media screen and (min-width:769px) and (max-width:1024px) {

    #mobileVersion { display: block; }

}

/* markup for mobile */
@media screen and (max-width:768px) {

    #mobileVersion { display: block; }

}

/* markup for desktop */
@media screen and (min-width:1025px) {

    #desktopVersion { display: block; }

}

HTML

<div id="mobileVersion"></div>
<div id="desktopVersion"></div>

but checking on my iPhone (12) does not show the desktop version. However the wordpress website with elementor does show my mobile version correct on my phone. Where I based the break points on.