style autmatic

css/style.css

@@ -1,3 +0,0 @@
-@media screen and (max-width: 2000px) {
-    .mt-toot {padding: 7rem 0 2rem 0 !important;}
-}

mas-body.php

@@ -9,7 +9,21 @@ function mas_body($atts) {
 	$toots_limit = (!empty($atts['toots_limit'])) ? $atts['toots_limit'] : "";
 
     return "
+	<div id='style'></div>
+	<div class=\"dummy-container\">
+		<div id=\"mt-timeline\" class=\"mt-timeline\">
+			<div id=\"mt-body\" class=\"mt-body\">
+				<div class=\"loading-spinner\"></div>
+			</div>
+		</div>
+	</div> 
+
 	<script>
+	var clientWidth = document.getElementById('mt-timeline').clientWidth;
+	if (clientWidth<350) {
+		var div = document.getElementById('style');
+		div.innerHTML += '<style>.mt-toot {padding:7rem 0 2rem 0}</style>';
+	}
 	// Account settings
 	document.addEventListener(\"DOMContentLoaded\", () => {
 		let mapi = new MastodonApi({
@@ -22,14 +36,6 @@ function mas_body($atts) {
 			btn_see_more: 'Mehr auf Mastodon'
 		});
 	});
-   </script>
-
-	<div class=\"dummy-container\">
-		<div id=\"mt-timeline\" class=\"mt-timeline\">
-			<div id=\"mt-body\" class=\"mt-body\">
-				<div class=\"loading-spinner\"></div>
-			</div>
-		</div>
-	</div>   
+</script>  
     ";
 }

mastodon-timeline.php

@@ -3,9 +3,9 @@
 * Plugin Name: Mastodon Timeline
 * Plugin URI: https://hupfeld-software.de/plugins/mastadon-timeline/#!README.md
 * Description: Plugin zur Darstellung der Mastodon Timeline (benutzt https://gitlab.com/idotj/mastodon-embed-feed-timeline)
-* Version: 0.02
+* Version: 0.03
 * Author: Walter Hupfeld
-* Datum: 19.11.2022
+* Datum: 21.11.2022
 * Author URI: http://www.hupfeld-software.de
 */
 
@@ -20,7 +20,6 @@ function mas_style_and_script()
 {
     // css
     wp_register_style( 'mas-style', plugins_url('css/mastodon-timeline.css', __FILE__) ); 
-    wp_register_style( 'style', plugins_url('css/style.css', __FILE__) ); 
     // js
     wp_register_script( 'mas-script', plugins_url('js/mastodon-timeline.js', __FILE__), array('jquery') );  
 }