My bootstrap image gallery is not correctly.
Here you can see its too much space there. My images are not everytime same size:
Wrong
I photoshopped what it should look like:
Correct
My code:
<div class="gallery">
<div class="container">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<div class="col-md-3">
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<p><?php echo $gallery['gallery_name']; ?></p>
</figcaption>
</figure>
</div>
<?php } ?>
</div>
</div>
Related
I'm using bootstrap 3 modal,the design I have to do is shown below
My code is:
<div class="row fr-flags">
<?php foreach ($language as $lang): ?>
<div class="col-xs-3">
<div class="row fr-flag">
<a class ="close-fr-popup" href="<?php echo $lang['link']; ?>">
<img alt="<?php echo $lang['location']; ?>" src="<?php echo $lang['flag']; ?>">
</a>
</div>
<div class="row fr-text">
<a class="dont close-fr-popup" href="<?php echo $lang['link']; ?>">
<?php echo $lang['location']; ?>
</a>
</div>
</div>
<?php endforeach;?>
</div>
What I get is 4 by 3 columns but not the vertical alignment I'm after,and I get the text not centered below the flag, basically I'm missing some margins but every time I fix something, something else gets broken or on a different screen size.
I'm trying to build an image gallery but it's showing some weird behavior. In my case the first row is populated by the 3 images but in second row 2 columns are skipped and one is populated by image and same with the 3rd row.
HTML Code :
<div class="container gallery-container">
<p class="page-description text-center">Snaps by attendies</p>
<div class="tz-gallery">
<div class="row">
<?php if($images): ?>
<?php foreach($images as $Image) : ?>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="<?php echo Image['path'];?>">
<img src="<?php echo Image['path'];?>" alt="Benches">
</a>
<p><?php echo Image['description']; ?></p>
</div>
<?php endforeach; ?>
<?php else: ?>
No images yet uploaded!
<?php endif; ?>
</div>
</div>
</div>
If you're using bootstrap try this code:
<div class="container">
<div class="card-columns">
<?php if(isset($images)) { ?>
<?php foreach($images as $Image) { ?>
<div class="card">
<a href="<?php echo $Image['path'];?>">
<img class="card-img-top" src="<?php echo $Image['path']; ?>" alt="Card image cap">
</a>
<div class="card-body">
<h5 class="card-title"><?php echo $Image['description']; ?></h5>
</div>
</div>
<?php } ?>
<?php } else { ?>
No images yet uploaded!
<?php } ?>
</div>
</div>
give height to image
<img class="card-img-top" src="<?php echo $Image['path']; ?>" style="height: 300px;" alt="Card image cap"> </a>
I have problem with container. I have in container news and if one news tile is bigger it going into footer.
Like this:
image here: container not working correctly
I didnt find any working resultion
My code:
<?php
$db = mysqli_query($con, "SELECT * FROM gallery") or trigger_error("Vigane päring: " . mysqli_error($con));
?>
<div class="gallery">
<div class="restaurant-full-width block-events row">
<div class="container-fluid block-events" style="width: 1230px!important;">
<div class="content">
<div class="wrap">
<div id="main" role="main" style="min-height:1200px!important;">
<h1 class="clearfix"><?php echo $lang['koikuudised']; ?></h1>
<ul id="tiles">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<li>
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<div class="brown">
<p><?php echo $gallery['gallery_name']; ?></p>
</div>
</figcaption>
</figure>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
For this you need to add cleafix div before closing the block
<div class="container-fluid block-events" style="width: 1230px!important;">
<div class="content">
<div class="wrap">
<div id="main" role="main" style="min-height:1200px!important;">
<h1 class="clearfix"><?php echo $lang['koikuudised']; ?></h1>
<ul id="tiles">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<li>
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<div class="brown">
<p><?php echo $gallery['gallery_name']; ?></p>
</div>
</figcaption>
</figure>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Or you can add clear:both css inline
<div class="container-fluid block-events" style="width: 1230px!important;">
<div class="content">
<div class="wrap">
<div id="main" role="main" style="min-height:1200px!important;">
<h1 class="clearfix"><?php echo $lang['koikuudised']; ?></h1>
<ul id="tiles">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<li>
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<div class="brown">
<p><?php echo $gallery['gallery_name']; ?></p>
</div>
</figcaption>
</figure>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
I'm using the col-md-6 class in bootstrap to arrange my content into two 50% columns.
Here is a demonstration of how it looks and how I want it to look. The one on the left is how it looks and the one on the right is how I want it to look:
The titles seem to align fine, but the rest of the content does not.
Also, for some reason, the third title is lagging on the bottom instead of aligning to the fourth title (I have no idea why).
Code:
<div class="container">
<div class="row">
<?php
while ($query->have_posts())
{
$query->the_post();
?>
<div class="col-md-6">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
</a>
<p><br /><?php the_excerpt(); ?><p>
<div class="alert alert-dismissible alert-info">
<h3>Free trial available?</h3>
<p><?php the_field('free'); ?></p>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="container">
<?php
$i=0;
while ($query->have_posts())
{
if($i%2==0)
echo '<div class="row">';
$query->the_post();
?>
<div class="col-md-6" >
<div style="height:600px">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
</a>
<p><br /><?php the_excerpt(); ?><p>
</div>
<div class="alert alert-dismissible alert-info">
<h3>Free trial available?</h3>
<p><?php the_field('free'); ?></p>
</div>
</div>
<?php
if($i%2!=0)
echo '</div>';
$i++;
}
?>
</div>
Do it like this:
/* CSS used here will be applied after bootstrap.css */
.content1{
background-color:red;
}
.content2{
background-color:blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 content1">
<h1> CONTENT</h1><h1>
<p>xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div>
<div class="col-md-6 content2">
<h1> CONTENT</h1><h1>
<p>xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div>
</div>
</div>
I have a small HTML problem with this code:
<div id="primary">
<div id="content" role="main">
<div class="astro"><img class="astro" src="<?php echo get_template_directory_uri() . '/images/astro.png'; ?>" alt="Astro" />
</div>
<div class="planet"><img class="planet" src="<?php echo get_template_directory_uri() . '/images/planet.png'; ?>" alt="Planet" />
</div>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php echo $page_data->post_title; ?></h1>
<div class="entry-content"><?php echo $page_data->post_excerpt; ?>
Read More...
</div>
</article>
<div id="tour-center">
<h1 class="entry-title">Tour Our Center</h1>
</div>
<div id="news-section-title">
<h1 class="entry-title"><?php echo get_the_title(75); ?></h1>
<div class="hr"></div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
</div><!-- #content -->
</div><!-- #primary -->
I've deleted some PHP code in between the divs so that the HTML is more visible. The problem is that the content div stops right after the news-section-title div and I can't figure it out why. It should extend until the end of the document, where the closing div is. You can view the code live on this website.
just add this style to your content div
#content {
float:left;
}
div's won't wrap floated elements unless you use some kind of clearfix solution. Try adding overflow: hidden to the style of your content div.