I'm making a counter that is contained within a box. I'm trying to make this counter responsive to different screen sizes, but the media query I'm trying to use will not work for some reason.
I have tried changing the the device width to below 768px but the query has no effect on the counter and I'm not sure why. I have included the HTML/PHP code for the counter as well as the CSS. Can anybody figure out why it's not working
I have made sure this tag is included in the head of the document.
<meta name="viewport" content="width=device-width, initial-scale=1">
Code:
.wrapper {
width: 100%;
float: center
}
.counter-container {
top: 14vh;
right: 4%;
float: right;
width: auto;
height: auto;
background-color: rgb(0, 0, 0, 0.7);
border-radius: 4%;
font-family: Trebuchet MS;
color: white;
}
.counter {
margin-bottom: 5px;
}
.count-title {
font-size: 10px;
font-weight: bolder;
margin-top: 0;
margin-bottom: 0;
text-align: center;
line-height: 70px;
}
.count-text {
font-size: 16px;
font-weight: bold;
margin: 5px 20px 10px 20px;
text-align: center;
color: white;
}
.count-dial {
font-size: 14px;
font-weight: normal;
margin: 8px 5px;
text-align: center;
}
.counter-closer {
float: right;
margin: 2px 6px;
padding: 0;
font-size: 18px;
background-color: rgb(0, 0, 0, 0.5);
}
.counter-closer:hover {
-webkit-filter: invert(1);
filter: invert(1);
}
.counter-digit {
background-image: linear-gradient(180deg, rgb(153, 255, 102), rgb(0, 255, 0));
border-radius: 5%;
color: rgb(0, 128, 0);
padding: 5px;
font-size: 30px;
}
.counter-row {
display: flex;
justify-content: center;
width: 100%;
margin-top: 2px;
}
.bottle-icon {
width: 38px;
height: 50px;
margin: 0 10px 10px 0;
}
.rotate-bottle {
transform: rotate(25deg);
-webkit-animation: shake .5s ease-in-out .1s infinite alternate;
}
#-webkit-keyframes shake {
from {
-webkit-transform: rotate(35deg);
}
to {
-webkit-transform: rotate(15deg);
-webkit-transform: rotate(25deg);
}
<div class="counter col_fourth counter-container" id="bottleCounter">
<i class="fas fa-times counter-closer" onclick="closeCounter()"></i>
<div class="counter-row">
<!--NB 19.11.21 green bottle image next to counter-->
<img class="bottle-icon rotate-bottle" src="https://img.resultclothing.net/icons/Green_Bottle.png" alt="water bottle">
<h2 class="count-title count-number">
<?php
$bottleCount = str_split(intval($var));
echo '
<span class="timer counter-digit" data-to="'.$bottleCount[0].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[1].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[2].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[3].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[4].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[5].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[6].'" data-speed="5000"></span>';
?>
</h2>
</div>
<p class="count-text">
<?php echo constant('LANG_FOOTER_BOTTLES_REC'); ?>
</p>
</div>
the missing closing bracket
Add the closing bracket to you keyframe
#-webkit-keyframes shake {
from{
-webkit-transform: rotate(35deg);
}
to {
-webkit-transform:rotate(15deg);
-webkit-transform:rotate(25deg);
}
}
I'm trying to center my paginator.
I keep trying different things but it either goes all the way to the right, or it doesn't get centered.
This is my code :
<?php
$pagination = $products->pagination();?>
<?php foreach($pagination->range(10)as $r): ?>
<div class="paginator">
<ul>
<li><a<?php if($pagination->page() == $r) echo ' ' ?> href="<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>
</ul>
</div>
<?php endforeach ?>
?>
and here is my css
.paginator {
width: 100%;
margin-left: auto;
margin-right: auto;
/*position: absolute;*/
/*bottom: 0;*/
/*left:0;*/
/*right:0;*/
}
.paginator li {
float: left;
padding: 5px 8px 8px 8px;
font-size: 13px;
font-weight: 600;
transition: .5s;
border: thin solid #2A4143;
/*border-radius: 0 25px 0 0;*/
top: 100%;
left: -1px;
height: 28px;
width: 28px;
background-color: #F5F5F5;
display: inline;
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*max-height: 100px;*/
/*position: absolute;*/
}
Add text-align: center; to .paginator and remove float: left; from .paginator li
EDIT: added a container for all the paginators and then made .paginator to disply: inline-block; and added text-align: center; to the new container in CSS. Also remove width: 100%; from .paginator
Also to note, make that container outside of your foreach loop.
See working example here:
.container {
text-align: center;
}
.paginator {
margin-left: auto;
margin-right: auto;
text-align: center;
display: inline-block;
/*position: absolute;*/
/*bottom: 0;*/
/*left:0;*/
/*right:0;*/
}
.paginator li {
padding: 5px 8px 8px 8px;
font-size: 13px;
font-weight: 600;
transition: .5s;
border: thin solid #2A4143;
/*border-radius: 0 25px 0 0;*/
top: 100%;
left: -1px;
height: 28px;
width: 28px;
background-color: #F5F5F5;
display: inline;
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*max-height: 100px;*/
/*position: absolute;*/
}
<div class="container">
<div class="paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
<div class="paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
<div class="paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
</div>
css:
<style>
#head3{
color: #fff;
text-align: center;
font-weight: bold;
background-image: url(images/flag/sab.jpg);
background-size: 1095px 180px;
background-repeat: no-repeat;
height: 180px;
}
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 240px;
height: 140px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
background: orange;
transform: rotateY(180deg);
}
#head5{
text-align: center;
margin-top: 50px;
font-weight: bold;
color: #fff;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
#heading{
color: #fff;
text-align: center;
font-weight: bold;
background: #260663;
width: 240px;
}
</style>
code:
<?php
$sql = "select * from country";
$result = mysqli_query($link,$sql);
while ($fetch = mysqli_fetch_array($result))
{
$id = $fetch['id'];
$about = $fetch['about'];
$country_name = $fetch['country_name'];
?>
<div class="col-md-3">
<h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
<div class="flipper">
<div class="front">
<img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
</div>
<div class="back">
<h5 id="head5">About USA <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<?php
}
?>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
In this code I want to open diffrent modal according by country name.
<span>(click)</span>
here I am echo $country_name but there is no modal showing but when I am define openModal in place of $country_name modal open so, how can I open diffrent modal according to country_name ?
Thank You
<?php
$sql = "select * from country";
$result = mysqli_query($link,$sql);
while ($fetch = mysqli_fetch_array($result))
{
$id = $fetch['id'];
$about = $fetch['about'];
$country_name = $fetch['country_name'];
?>
<div class="col-md-3">
<h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
<div class="flipper">
<div class="front">
<img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
</div>
<div class="back">
<h5 id="head5">About USA <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
<?php
}
?>
So Im working on a project for a client and ran into an issue with Border-Radius + Bootstrap,
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is after adding bootstrap to make it more responsive on mobile, well after doing that this is what the top now looks like;
This is what it looks like when I remove the Bootstrap code;
This is the code with out bootstrap on the image
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is my css
/* Top Header */
.header {
padding-top: 1.5em;
border-top: solid .3em rgba(46, 204, 113, 1.0);
}
.top-nav {
margin-top: 1.2em;
margin-right: auto;
margin-bottom: .8em;
margin-left: auto;
width: 30em;
}
.logo {
float: left;
width: 5em;
height: 5em;
border: solid .1em rgba(46, 204, 113, 1.0);
border-radius: 50%;
}
.social-media-top {
float: right;
padding-bottom: 1em;
}
.social-media-top h1 {
margin: 0;
padding: 0;
color: #41eb71;
font-weight: 100;
font-size: 2em;
align-content: center;
}
.social-media-top h1 span {
color: #41eb71;
text-transform: capitalize;
font-weight: 600;
}
.social-media-top li {
display: inline-block;
}
.social-media-top li i {
display: inline-block;
width: 2em;
height: 2em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(46, 204, 113, 1.0);
color: white;
text-align: center;
line-height: 2em;
}
I have made this gallery listview page here and I want it so that all 3 columns are equally filled with items from my database, right now it creates a new column every time and displays the same sql item thrice.
Img here: http://i.stack.imgur.com/LMw1L.png
As you can see it just creates a whole bunch of columns which is not what I want.
How do I alter my php so that it neatly distributes the database items in my 3 columns (.column, .column-2, .column-3)?
home.php
<?php
ob_start();
require_once("connect.php");
if(isset($_POST['name'])){
$_SESSION["user"] = $_POST["name"];
$name = $_SESSION["user"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dotbar.css">
<link rel="stylesheet" href="css/loginoverlay.css">
<!--jQuery library voor de menubar -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<!-- Show login screen, when cookie is not placed -->
<?php
if (empty($_COOKIE['first_time'])) {
?><div id="black-overlay">
<div id="grey-box">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
<form action="home.php" method="POST">
<br>
<br>
<label for="name"> Naam: </label>
<br>
<input type="text" name="name" id="name">
<label for="password"> Wachtwoord: </label>
<br>
<input type="password" name="password" id="password">
<input type="submit" value="submit" name="submit">
</form>
</div>
</div><?php;
setcookie("first_time", 1, time()+157680000); /* expire in 5 years */}
?>
<!--page content -->
<div class="container">
<div class="container2">
<nav id='nav_bar'>
<ul class='nav_links'>
<li>
<?php
//If there is a user SESSION echo in NAV bar
if(isset($_SESSION['user'])) {
//echo admin link when admin is logged in
if ($_SESSION['user'] == 'admin') {
echo "<a href='admin.php'>Admin</a>";
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}
//echo user which is not the admin when logged in
else {echo $_SESSION["user"];
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}}
//echo the login button when user is not logged in
else { echo "<a href='login.php'>Login</a>";}
?>
<br><br><br>→<br><br><br>
</li>
<li>
<a href="?pages=home">
Home<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news">
Blog<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news2">
Gallery <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news3">
About <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news4">
Contact<br><br><br>→<br><br><br>
</a>
</li>
</ul>
</nav>
<div class="content">
<h1>
GRAKA!
</h1>
<div id="bar2">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="circle8"></div>
<div id="circle9"></div>
<div id="circle10"></div>
<div id="circle11"></div>
</div>
<?php
if(isset($_GET['pages'])) {
$pages = $_GET['pages'];
$pagename = $pages. '.php';
include_once($pagename);
}?>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<h2>
Designed and produced by
</h2>
<h3>
All rights reserved.<br>
</h3>
</div>
</footer>
<!--Menubar script -->
<script src="menubar.js"></script>
</body>
</html>
<?php
ob_flush();
?>
news2.php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php}?>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php } ?>
css:
body {
margin: 0px;
padding: 0px;
background-color: black;
background-attachment: fixed;
background-image: url(img/2560x2560bubbles.png);
background-size: cover;
font-family: "Segoe UI", 'Helvetica Neue';
}
.container {
margin-top: 520px;
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
background-image: -moz-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
}
.container2 {
width: 1280px;
padding-bottom: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
nav {
margin-left: 7.5%;
margin-top: 100px;
width: 10%;
float: left;
}
#nav_bar {}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
margin-left: 5.3%;
}
ul {
list-style-type: none;
}
li {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: bold;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
clear: none;
min-height: 0px;
}
a {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: grey;
}
a:focus {
text-decoration: none;
color: yellowgreen;
}
a:active {
text-decoration: none;
color: greenyellow
}
.content {
width: 70%;
margin-right: 7.5%;
margin-top: 100px;
float: right;
}
article {
width: 45.4%;
padding: 2.3%;
float: left;
}
img {
width: 100%;
}
h1 {
text-align: right;
margin: 0px;
font-size: 6.0em;
margin-bottom: 10px;
}
h2 {
margin: 0px;
text-align: center;
}
h3 {
margin: 0px;
text-align: center;
}
p {}
p1 {
float: right;
}
footer {
margin-top: 320px;
background-color: rgb(28, 28, 28);
height: 260px;
padding: 120px;
}
.footer-content {
color: white;
}
/*--Bloglist.css --*/
#blog {
width: 100%;
padding: 2.3%;
margin-top: 2.3%;
overflow: hidden;
}
article3 {
width: 100%;
padding: 2.3%;
overflow: hidden;
}
#blogfoto {
width: 257px;
height: 257px;
float: left;
overflow: hidden;
background-color: black;
}
p1#blog {
margin-top: 0px;
width: 62.07%;
float: left;
}
h4 {
margin-left: 2.3%;
float: left;
width: 56.66%;
margin-bottom: 0px;
}
/*-- Thumbnails --*/
.wrapper {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
}
/*-- Gallerylist -- */
.column {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: blue;
}
.column2 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: green;
}
.column3 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: red;
}
I'm assuming that you want each column to show a different row from your database. If so, just include a counter variable say $count = 0; before you enter your loop.
When $count % 3 == 0 use the class '.column', when $count % 3 == 1 use the '.column-2' and $count % 3 == 2 use '.column-3'.
Don't forget to increment the loop counter at the end of each iteration.
Edit:
<?php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
<?php }
else if($count % 3 == 1){
?>
</div>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php }
else{
?>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php
}
$count++;
}
?>
This is not the neatest code, but this should get the job done.