I'm trying to create a simple page with CSS Grid.
The result is pretty good before inserting a php function with MySQL.
CSS
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 5px;
width: 350px;
}
HTML/PHP
<div class="container text-center">
<br>
<div class="item col-lg-4">
<div class="thumbnail">
<br>
<?php if ($fetch['file_name'] == '') { ?>
<img class="img-fluid" src="../images/missing.png" alt="Sample image" style="height:150px; width:150px;">
<?php } else { ?>
<img class="img-fluid" src="../images/<?php echo $fetch['file_name']; ?>" alt="missing.png" style="height:150px; width:150px;"/>
<?php } ?>
<div class="caption">
<h4><?php echo $fetch['school_name']; ?></h4>
<p><?php echo $fetch['email']; ?></p>
<p class="lead">$21.000</p>
<a class="btn2" href="profileorg.php?Org_ID=<?php echo $fetch['Org_ID'] ?>">View profile</a>
</div>
</div>
</div>
<?php } ?>
</div>
The screenshot is below
This is my problem:
After inserting php function
What I want is grid align like this:
Reference
<div class="container text-center">
<br>
<div class="item col-lg-4">
<div class="thumbnail">
<br>
<?php if ($fetch['file_name'] == '') { ?>
<img class="img-fluid" src="../images/missing.png" alt="Sample image" style="height:150px; width:150px;">
<?php } else { ?>
<img class="img-fluid" src="../images/<?php echo $fetch['file_name']; ?>" alt="missing.png" style="height:150px; width:150px;"/>
<?php } ?>
<div class="caption">
<h4><?php echo $fetch['school_name']; ?></h4>
<p><?php echo $fetch['email']; ?></p>
<p class="lead">$21.000</p>
<a class="btn2" href="profileorg.php?Org_ID=<?php echo $fetch['Org_ID'] ?>">View profile</a>
</div>
</div>
</div>
</div>
probably its because you have inserted extra closing braces. This code will work fine you.
Related
in my code i used
<img class='container card-body furniture-size' src="../FurnitureImages/<? echo$item->getImage().'-1.jpg'?>"
but when i test it the image name is
<?%20echo%20$item->getImage().%27-1.jpg%27%20?>
instead of
"furniture1-1.jpg"
the section with the code is:
<div class="center-align main-side furniture-box " style="float: right">
<h1 class="w-100 p-5 pulse text-white" >Furniture</h1>
<div class="col-sm-12 row" style="margin-left: 175px">
<?php foreach ($view->searchResult as $item) { ?>
<div class='furniture-box border-white col-sm-4 pt-2 pb-3 m-1' style='float: right; color:#fff; background:#9fa9a3'>
<?php echo $item->getFurnitureName()?>
<img class="container card-body furniture-size'" src="../FurnitureImages/<?php echo $item->getImage() . '-1.jpg'; ?>"/>
Color: <?php echo $item->getFurnitureColour()?>
<br>
View to Bid
</div>
<?php }?>
</div>
</div>
can anyone help me fix this please?
Seems like a silly question, but I can't display posts in three columns.
I was using this code with bootstrap, but I can't anymore because it somehow breaks other parts of my page. I had to change it.
<div class="row" style="margin-top:-30px">
<?php
$count=0;
query_posts('posts_per_page=9');
while (have_posts()) : the_post();
?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('content-noticias', get_post_format()); ?>
</div>
<?php
$count++;
if($count == 3 || $count == 6 ) echo '</div><div class="row">';
endwhile;
?>
</div>
It would do the work, but not anymore because of that. How to display my posts in columns without bootstrap? Just for information, my content-noticias is:
<div class="noticias">
<?the_post_thumbnail();?>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div><p><?php echo wp_trim_words( get_the_content(), 50 ); ?></p></div>
</div>
</div>
Hey man for row you can use css property flex-flow: row wrap; and for child items flex-basis: 33%; and any of your items in your post loop will be in 3 columns , and you can change flex basis for other mediaquery for change sie on mobile for example, check this out !
.container {
max-width: 1335px;
margin: 0 auto;
}
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 250px;
flex-basis: 33%;
-ms-flex: auto;
width: 250px;
position: relative;
padding: 10px;
box-sizing: border-box;
background-color: #ededed;
border: 1px solid white;
}
#media(max-width: 1333px) {
.grid-item {
flex-basis: 33.33%;
}
}
#media(max-width: 1073px) {
.grid-item {
flex-basis: 33.33%;
}
}
#media(max-width: 815px) {
.grid-item {
flex-basis: 33%;
}
}
#media(max-width: 555px) {
.grid-item {
flex-basis: 100%;
}
}
<div class='container'>
<div class='grid-row'>
<div class='grid-item'>
<div class="noticias">
<a href="<?php the_permalink(); ?>">
<?the_post_thumbnail();?>
</a>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div>
<p>
<?php echo wp_trim_words( get_the_content(), 50 ); ?>
</p>
</div>
</div>
</div>
<div class='grid-item'>
<div class="noticias">
<a href="<?php the_permalink(); ?>">
<?the_post_thumbnail();?>
</a>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div>
<p>
<?php echo wp_trim_words( get_the_content(), 50 ); ?>
</p>
</div>
</div>
</div>
<div class='grid-item'>
<div class="noticias">
<a href="<?php the_permalink(); ?>">
<?the_post_thumbnail();?>
</a>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div>
<p>
<?php echo wp_trim_words( get_the_content(), 50 ); ?>
</p>
</div>
</div>
</div>
<div class='grid-item'>
<div class="noticias">
<a href="<?php the_permalink(); ?>">
<?the_post_thumbnail();?>
</a>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div>
<p>
<?php echo wp_trim_words( get_the_content(), 50 ); ?>
</p>
</div>
</div>
</div>
<div class='grid-item'>
<div class="noticias">
<a href="<?php the_permalink(); ?>">
<?the_post_thumbnail();?>
</a>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div>
<p>
<?php echo wp_trim_words( get_the_content(), 50 ); ?>
</p>
</div>
</div>
</div>
<div class='grid-item'>
<div class="noticias">
<a href="<?php the_permalink(); ?>">
<?the_post_thumbnail();?>
</a>
<h1 style="margin-top:-30px"><?php the_title(); ?></h1>
<div>
<p>
<?php echo wp_trim_words( get_the_content(), 50 ); ?>
</p>
</div>
</div>
</div>
</div>
</div>
The problem is in your $count if statement:
if($count == 3 || $count == 6 ) echo '</div><div class="row">'; <-- THIS WILL NEVER CLOSE
What you can do is this:
<div class="row" style="margin-top:-30px">
<?php
query_posts('posts_per_page=9');
while (have_posts()) : the_post();
?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('content-noticias', get_post_format()); ?>
</div>
<?php endwhile;?>
</div>
Then you can use CSS to make sure your columns stay intact:
.row .blog-post:nth-child(3n+1) {
clear: left;
}
That will make sure that every third element will clear so if one of the columns is longer or shorter, it won't mess with the layout.
Basically what I need to do foreach three divs and show 5 services from the database.
I don't know how to do that. Can someone explain to me how?
I try everything but just I have no idea how to do it.
Second div should not be in row.
Output be like on image link that I put below.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This should look like this
Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.
Do let me know if this worked and how it looked like on your screen. Thanks.
PS: dont run snippet, just use the css, bootstrap is not included.
.service-img.service {
height: 50%;
}
.height100{
height:100px;
}
.service-middle>.service-img.service{
height:100% !important;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row height100">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Not really sure if the div.row should go in 2nd row, but I hope you get the idea.
I'm just using a ternary operator to add the service-middle class: <?php echo $num == 2? 'sevice-middle' : '' ?>
<?php if ($num == 1): ?>
<div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>
<?php foreach ($services as $service): $num++; ?>
<div class="row">
<div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
<figcaption>
<h3><?php echo $service['title']; ?></h3>
</figcaption>
</div>
</div>
<?php endforeach ?>
<?php if ($num > 0): ?>
</div>
<?php endif ?>
The primary bug you are facing is this:
<?php if ($num == 1): ?>
should be
<?php if ($num === 1): ?>
For more info:
How does true/false work in PHP?
Have a website in three languages. The porducts select from a mysql database and showed wiht a do-while-loop.
<!-- Shop Page Area Start-->
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
<h2>
<?php echo $page['subtitle']; ?>
</h2>
<?php echo $page['content']; ?>
</div>
<div class="row">
<?php
do {
?>
<!--Product Start-->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo $product['img']; ?>" alt=""/>
<h2>
<a href="#">
<?php echo $product['name']; ?>
</a>
</h2>
</div>
<h3>
<?php echo $product['desc']; ?>
</h3>
<span><?php echo $product['size']; ?></span> <span class="price"><?php echo $product['price']; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo $product['uniqueid']; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<!-- Product End -->
<?php
} while ($product = $res->fetch_assoc()) ?>
</div>
<!-- end Row -->
</div>
</div>
The problem is that in one language showed correctly and in the other i get a lot spaces between the products. See the image
enter image description here
How i can solve this
Add an additional class flex-row to the product wrapping row element. And try applying the following styles.
.flex-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
You can divide your column like this
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
</div>
<div class="row">
<?php $i=1;
do {
?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo "test"; ?>" alt=""/>
<h2><?php echo "test"; ?> </h2>
</div>
<h3><?php echo ($i==2)? " testtesttesttesttesttest testtesttesttest test": "test"; ?></h3>
<span><?php echo "test"; ?></span> <span class="price"><?php echo 12321; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo "1231"; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<?php
echo $i%4;
if($i%4== 0 && $i > 1) {
echo '</div><div class="row">';
}
$i++;
} while ($i<=10) ?>
</div>
</div>
</div>
How can I accomplish for Bootstrap to push a column on next line if doesn't fit? This is a link how it is right now: Link to current page
Image of current page:
This is an image how it is right now. I'd like that the third image to drop to the row below if it doesn't fit.
This is code below
<div class="row">
<?php
if($members):
?>
<ul class="team_members">
<li>
<?php foreach($members as $member): ?>
<div class="cl col-xs-12 col-sm-3 col-md-3 col-lg-3">
<?php if($member["member_avatar"]): ?>
<div class="animated">
<div class="member drivprojekt" style="border-radius: 50%; width: 100%; height: 100%; overflow: hidden;">
<img src="<?php echo $member["member_avatar"]["sizes"]["member_thumb"]; ?>" alt="" />
</div>
</div>
<?php endif; ?>
</div>
<div class="cl col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="member_info">
<h3><?php echo $member["member_name"]; ?></h3>
<h4><?php echo $member["member_position"]; ?></h4>
<p><?php echo do_shortcode(nl2br($member["member_description"])); ?></p>
</div>
</div>
<?php endforeach; ?>
</li>
</ul>
<?php endif; ?>
</div>
use flex-box
ul.team_members li{
display: flex;
flex-wrap: wrap;
}
you can use this kind of divs if you want. Its just a suggestion
<div class="cl col-xs-12 col-sm-3 col-md-2 col-lg-3"></div>
replace col-md-3 to col-md-2