I currently have a quart endpoint in Python. Via this endpoint the Index.html is rendered and filled with data. Problem: On my PC I see the page normally, but on mobile it looks like this: mobile look
and on desktop it looks like this: desktop look
Also, a friend tested and he only saw it after reloading several times.
Does anyone know a solution?
Thanks in advance!
I would expect it to look exactly the same from a design perspective.
Quart-Route:
@app.route('/test')
async def render_html_test():
# Holen Sie die Nachricht aus der session und löschen Sie sie dann
success = session.pop('success', None)
error = session.pop('error', None)
username = session.get('username')
role = session.get('role')
avatar = None # Setzen Sie einen Standardwert für avatar
if session.get('logged_in'):
user_info = await get_discord_user_info(session['access_token'])
if user_info and 'id' in user_info and 'avatar' in user_info:
avatar = f"https://cdn.discordapp.com/avatars/{user_info['id']}/{user_info['avatar']}.png"
return await render_template('/test_parts/index.html', username=username, success=success, error=error, avatar=avatar, role=role)
index.html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="de">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Chaosgaming Webseite">
<meta name="author" content="Lukas W.">
<title>Chaosgaming | Dein Gaming-Netzwerk</title>
<link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='/images/favicon.png') }}">
<!-- Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/animate.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/fontawesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/line-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/odometer.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/venobox.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/swiper.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/header.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/elements.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='/test_parts/assets/css/responsive.css') }}">
<!--jQuery Lib-->
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/jquary-3.6.0.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/jquery.ajaxchimp.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/popper.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/odometer.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/waypoints.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/venobox.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/swiper.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/smooth-scroll.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/vendor/wow.min.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/contact.js') }}"></script>
<script src="{{ url_for('static', filename='test_parts/assets/js/main.js') }}"></script>
<style>
.message-box {
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
border-radius: 8px;
transition: opacity 0.3s;
}
.error-box {
background-color: #ff4c4c;
color: white;
}
.success-box {
background-color: #4caf50;
color: white;
}
</style>
</head>
<body>
<div id="app">
<div v-if="isErrorVisible" class="message-box error-box">
<p>{{ error }}</p>
<button @click="closeError" class="close-button">X</button>
</div>
<div v-if="isSuccessVisible" class="message-box success-box">
<p>{{ success }}</p>
<button @click="closeSuccess" class="close-button">X</button>
</div>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader">
<div class="spinner"></div>
</div>
<!--site preloader-->
<header class="header">
<div class="primary-header">
<div class="container">
<div class="primary-header-inner">
<div class="header-logo">
<a href="index.html">
<img class="logo" src="{{ url_for('static', filename='/images/Chaosgaming-Corporate.png') }}" width="80px" height="80px" alt="Logo">
</a>
</div><!-- /.header-logo -->
<div class="header-menu-wrap">
<ul class="nav-menu">
<li class="active"><a href="/">Startseite</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="/sessionFinder">Session-Finder</a></li>
</ul>
</li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</div><!-- /.header-menu-wrap -->
<div class="header-right">
<div class="header-menu-wrap">
<ul class="nav-menu">
<li v-if="!username"><a class="default-btn" href="/discord_login">Anmelden</a></li>
<li v-else>
<a v-if="isMobile" href="#">{{ username }}</a>
<a v-else class="default-btn" href="#">{{ username }}</a>
<ul>
<li><a href="/profil">Profil</a></li>
<li><a href="/service-portal">Service-Portal</a></li>
<li v-if="role === 'Admin' || role === 'Mod' || role === 'Test-Mod'"><a href="/teambereich">Team-Bereich</a></li>
<li><a href="/logout">Abmelden</a></li>
</ul>
</li>
</ul>
</div>
<!-- Burger menu -->
<div class="mobile-menu-icon">
<div class="burger-menu">
<div class="line-menu line-half first-line"></div>
<div class="line-menu"></div>
<div class="line-menu line-half last-line"></div>
</div>
</div>
</div><!-- /.header-right -->
</div><!-- /.primary-header-one-inner -->
</div>
</div><!-- /.primary-header -->
</header><!-- /.site-header-->
<section class="hero-section">
<div class="container">
<div class="hero-content">
<h4>Chaosgaming<br> Discord-Server</h4>
<h1>Dein Knotenpunkt zur<br> Virtuellen Welt!</h1>
<div class="btn-group">
<a href="/discord" class="default-btn">Discord-Server beitreten</a>
</div>
<div class="hero-element">
<img src="{{ url_for('static', filename='/test_parts/assets/img/game-charecters.png') }}" alt="thumb">
<div class="shape-wrap">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
<div class="shape-wrap right">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
</div><!-- /.hero-element -->
</div>
</div>
<div class="gradiant-border"></div>
</section>
<!--/.hero-section -->
<section class="team-section padding-bottom">
<div class="container">
<div class="section-heading text-center mb-40 wow fade-in-bottom" data-wow-delay="200ms">
<h2>Unser <span>Team</span></h2>
<p>Our success in creating business solutions is due in large part <br>to our talented and highly
committed team.</p>
</div>
<div class="outside-spacing">
<div class="team-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="team-item">
<div class="team-thumb">
<img src="{{ url_for('static', filename='/test_parts/assets/img/team-1.png') }}" alt="thumb">
<div class="shape-wrap">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
</div>
<div class="team-content">
<span class="whte-shape"></span>
<h3><a href="player-details.html">@lukaswrn</a></h3>
<h4>Admin</h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="team-item">
<div class="team-thumb">
<img src="{{ url_for('static', filename='/test_parts/assets/img/team-2.png') }}" alt="thumb">
<div class="shape-wrap">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
</div>
<div class="team-content">
<span class="whte-shape"></span>
<h3><a href="player-details.html">@bananadany</a></h3>
<h4>Admin</h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="team-item">
<div class="team-thumb">
<img src="{{ url_for('static', filename='/test_parts/assets/img/team-3.png') }}" alt="thumb">
<div class="shape-wrap">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
</div>
<div class="team-content">
<span class="whte-shape"></span>
<h3><a href="player-details.html">@tf_lisa</a></h3>
<h4>Admin</h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="team-item">
<div class="team-thumb">
<img src="{{ url_for('static', filename='/test_parts/assets/img/team-2.png') }}" alt="thumb">
<div class="shape-wrap">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
</div>
</div>
<div class="team-content">
<span class="whte-shape"></span>
<h3><a href="player-details.html">@reyes45</a></h3>
<h4>Test-Moderator</h4>
</div>
</div>
</div>
</div>
<!-- Carousel Arrows -->
<div class="swiper-nav swiper-next"><i class="las la-long-arrow-alt-right"></i></div>
<div class="swiper-nav swiper-prev"><i class="las la-long-arrow-alt-left"></i></div>
</div>
</div>
</div>
</section> <!-- /.team-section -->
<section class="contact-section padding-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 sm-padding">
<div class="section-heading">
<h3>Send Us a Mail</h3>
<h2>Join Us As a Super Fans and Get all <span>the Benefits</span></h2>
<p>Our success in creating business solutions is due in large part <br>to our talented and
highly committed team.</p>
<a href="contact.html" class="default-btn">Join Our Team <span></span></a>
</div>
</div>
<div class="col-md-6 sm-padding">
<div class="contact-form ml-40">
<form action="contact.php" method="post" id="ajax_contact" class="form-horizontal">
<div class="contact-form-group">
<div class="form-field">
<input type="text" id="contact_name" name="contact_name" class="form-control"
placeholder="Your Name" required>
</div>
<div class="form-field">
<input type="email" id="contact_email" name="contact_email" class="form-control"
placeholder="Email" required>
</div>
<div class="form-field message">
<textarea id="message" name="message" cols="30" rows="4" class="form-control"
placeholder="Message" required></textarea>
</div>
<div class="form-field">
<button id="submit" class="default-btn" type="submit">Send
Massage<span></span></button>
</div>
</div>
<div id="form-messages" class="alert" role="alert"></div>
</form>
</div>
</div>
</div>
</div>
</section><!-- /.contact-section -->
<div class="sponsor-section padding-bottom">
<div class="container">
<div class="outside-spacing">
<div class="sponsor-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ url_for('static', filename='/test_parts/assets/img/client-1.png') }}" alt="client">
</div>
<div class="swiper-slide">
<img src="{{ url_for('static', filename='/test_parts/assets/img/client-2.png') }}" alt="client">
</div>
<div class="swiper-slide">
<img src="{{ url_for('static', filename='/test_parts/assets/img/client-3.png') }}" alt="client">
</div>
<div class="swiper-slide">
<img src="{{ url_for('static', filename='/test_parts/assets/img/client-4.png') }}" alt="client">
</div>
<div class="swiper-slide">
<img src="{{ url_for('static', filename='/test_parts/assets/img/client-5.png') }}" alt="client">
</div>
<div class="swiper-slide">
<img src="{{ url_for('static', filename='/test_parts/assets/img/client-6.png') }}" alt="client">
</div>
</div>
</div>
</div>
</div>
</div><!-- /.sponsor-section -->
<footer class="footer-section">
<div class="container">
<div class="row footer-items">
<div class="col-lg-3 col-sm-6 sm-padding">
<div class="footer-item">
<a class="brand" href="index.html"><img src="{{ url_for('static', filename='/images/Chaosgaming-Corporate.png') }}" width="150px" height="150px" alt="logo"></a>
<p>Our success in creating business solutions is due in large part to our talented and highly
committed team.</p>
<ul class="social-list">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 sm-padding">
<div class="footer-item footer-list">
<div class="widget-title">
<h3>Rechtliches</h3>
</div>
<ul class="footer-links">
<li><a href="upcoming-matches.html">Impressum</a></li>
<li><a href="faq-page.html">Datenschutzerklärung</a></li>
<li><a href="about.html">Nutzungsbedingungen</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 sm-padding">
<div class="footer-item">
<div class="widget-title">
<h3>Kontakt</h3>
</div>
<ul class="footer-contact">
<li><span>Discord:</span>chaosgaming.eu/discord</li>
<li><span>E-Mail:</span>[email protected]</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 sm-padding">
<div class="footer-item subscribe-wrap">
<div class="widget-title">
<h3>Newsletter Anmeldung</h3>
</div>
<form action="#" class="subscribe-form">
<input class="form-control" type="email" name="email" placeholder="Your Email" required="">
<input type="hidden" name="action" value="mailchimpsubscribe">
<button class="submit">Anmelden</button>
<div class="clearfix"></div>
<div id="subscribe-result">
<div class="subscription-success"></div>
<div class="subscription-error"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="copyright-wrap">
<div class="container">
<p>© <span id="currentYear"></span> ChaosGaming | Alle Rechte vorbehalten.</p>
</div>
</div>
<!--copyright-wrap-->
</footer>
<!--footer-section-->
</div>
<div id="scrollup">
<button id="scroll-top" class="scroll-to-top hover-target"><i class="las la-arrow-up"></i></button>
</div>
<!--scrollup-->
<script>
new Vue({
el: '#app',
data: {
error: "{{ error }}",
success: "{{ success }}",
username: "{{ username }}" !== "None" ? "{{ username }}" : null,
avatar: "{{ avatar }}",
role: "{{ role }}",
isMobile: false
},
methods: {
closeError: function () {
this.error = null;
},
closeSuccess: function() {
this.success = null;
},
checkWindowSize: function() {
this.isMobile = window.innerWidth <= 768; // oder jede andere Grenze, die Sie als "mobil" definieren möchten
}
},
computed: {
isErrorVisible: function () {
return this.error && this.error !== '' && this.error !== 'None';
},
isSuccessVisible: function() {
return this.success && this.success !== '' && this.success !== 'None';
},
created() {
this.checkWindowSize();
window.addEventListener('resize', this.checkWindowSize);
},
destroyed() {
window.removeEventListener('resize', this.checkWindowSize);
},
}
});
</script>
</body>
</html>