I made a web page on PHP.
It is showing me different results in pc and in android browsers .
In android browser it is showing exactly what I want , but in pc it is showing blank page ( end point is same ).
Index.php
<?php
include_once "classes/Database.php";
$db = new Database();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Frontend Challenges</title>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light mb-3">
<a class="navbar-brand" href="#">
<img src="<?php echo $db->mySource ; ?>" height = "40" class="d-inline-block align-top" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class = "fa fa-search"></i></button>
</form>
</div>
</nav>
<div class="container">
<div class="row text-center">
<h3 class = "w-100 text-center mb-5">Frontend Challenges</h3></br>
<!-- <h4>Here are some of our challenges</h4> -->
<div class = "col-md-12">
<div class="card-deck">
<?php
$select_query = "SELECT * FROM challenges";
$result = $db->select($select_query);
if($result){
while($row = $result->fetch_assoc()){
?>
<div class="card mb-3" style = "text-align: center;">
<a class = "img_ref" href = ""><img src="uploads/<?php echo $row['image']; ?>" class="card-img-top" alt="..."></a>
<div class="card-body d-flex flex-column justify-content-between align-items-start">
<div class="card_title_tech text-left">
<a href=""><h4 class="card-title"><?php echo $row['title']; ?></h4></a>
<p class = "tech_used w-100">
<?php
$techs = explode(",",$row['tech']);
foreach($techs as $tech){
if($tech == "html"){
echo "<span class = 'tech_usage tech_html'>HTML</span>";
}else if($tech == "css"){
echo "<span class = 'tech_usage tech_css'>CSS</span>";
}else{
echo "<span class = 'tech_usage tech_js'>JS</span>";
}
}
?>
</p>
</div>
<p class="card-text text-left mb-4"><?php echo $row['descrip']; ?></p>
<a href="challenge.php?id=<?php echo $row['challenge_num']; ?>"><button class = "btn take_challenge_btn">Take this challenge</button></a>
</div>
</div>
<?php
}
}else{
echo "<h1 >No Challenges Found</h1>";
}
?>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
Style.css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Lato&family=Nunito&family=Roboto&display=swap');
h3{
font-family: 'Nunito',sans-serif;
font-size: 30px;
font-weight: 500;
}
h4{
font-size: 25px;
font-weight: 500;
}
a{
text-decoration: none;
}
.take_challenge_btn{
background-color: #00ae4d;
color:white;
transition: all 0.5s;
}
.take_challenge_btn:hover{
color:white;
background-color:#006a30;
transition: all 0.5s;
}
.card-title{
font-family: 'Lato';
font-weight: 500;
margin-bottom:15px;
}
.card-title:hover{
color:#00ae4d;
transition: all 0.2s;
}
.card{
box-sizing: border-box;
overflow: hidden;
}
.card-img-top{
transition: transform 0.5s;
}
.card-img-top:hover{
transform: scale(1.1);
transition: all 0.5s;
}
.card_title_tech a{
text-decoration: none;
color:#000;
}
.card_title_tech a:hover{
text-decoration: underline;
text-decoration-color: #00ae4d;
}
.tech_usage {
font-family: 'Roboto',sans-serif;
font-size: 18px;
font-weight: 700;
/* padding: 0px 10px; */
margin-right: 10px;
}
.tech_html{
color: rgb(106, 190, 205);
}
.tech_css{
color: rgb(62, 84, 163);
}
.tech_js{
color:rgb(207, 99, 144);
}
@media (min-width: 576px){
.card{
flex :none !important ;
width: 360px !important;
height: 527px !important;
}
}
Screenshot – pc view
Screenshot – android view
