My main file is a .php file, and images can be uploaded and displayed from this page. Getting those images to display in three columns has been confusing. It is usually done like this: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp with each image or images placed in div tags. three div tags if you want three columns. In my .php file, images are not written out in the code, so how do I get the images to display in three columns on the page?
I do include one div tag wrapped around the PHP code which is showing the first column.
Here is the CSS code:
.container{
}
.container .heading h3 span{
font-weight: 100;
}
.container .box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .box .dream{
flex-direction: column;
width: 32.5%;
}
.container .box .dream img{
width: 100%;
padding-bottom: 15px;
border-radius: 5px;
}
PHP code:
<div class="products-wrapper">
<div class="container">
<div class="box">
<div class="dream">
<?php foreach ($products as $product): ?>
<a href="<?=url('index.php?page=product&id=' .
($product['url_slug'] ? $product['url_slug'] : $product['id']))?
>" class="product">
<?php if (!empty($product['img']) &&
file_exists($product['img'])): ?>
<img src="<?=base_url?><?=$product['img']?>" alt="<?
=$product['name']?>">
<?php endif; ?>
<span class="name"><?=$product['name']?></span>
<span class="price">
<?=currency_code?><?=number_format($product['price'],2)?>
<?php if ($product['rrp'] > 0): ?>
<span class="rrp"><?=currency_code?><?
=number_format($product['rrp'],2)?></span>
<?php endif; ?>
</span>
</a>
<?php endforeach; ?>
</div>
I am new to ACF and want to use a repeater field to create a two column row. It is functioning how I want (two even, halved columns). I want each column to begin at the same height as the other, therefor I set the height. But I want to ensure I am using best practices... is how I wrote this the way you would recommend going about it? I feel like there is probably a better way.
Thank you in advance.
PHP
<div class="bg-white">
<div class="dib mw9 center">
<?php
if( have_rows('faq') ):
while ( have_rows('faq') ) : the_row(); ?>
<div class="parent">
<h4><?php the_sub_field('question'); ?></h4>
<p><?php the_sub_field('question_answer'); ?></p>
</div>
<?php endwhile;
else :
endif;
?>
</div>
</div>
CSS
.parent {
display: inline-block;
height: 240px;
width: 50%;
float: left;
padding: 48px 24px;
}
if you're able to add an additional class to the wrapping div (class="dib …"), lets call it '.parent-wrapper', you could simply use following code:
.parent-wrapper {
display: flex;
flex-wrap: wrap;
}
.parent {
flex: 50%;
padding: 48px 24px;
}
No need for height, as flex takes care of it. Here you're independent from the content length. So even very long answers would be formatted correctly.
I hope that helps :)
apologies for my bad title explanation. I've got a code which I'm trying to restyle, part of which is below. The PHP document I'm using does a (JSON) query to get active "boxes" to show up on screen, and automatically orders them as a list. I want the queried boxes in 2 columns, it doesn't have to be an ordered list.
Problem is, there is no li class in my .php file so I'm thinking I'll have to edit one of the classes below to achieve this?
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">'
<div class="x-column x-sm x-2-3";>
Is there a way to "add" li to the CSS or is there another way around it?
I know I can use a code like
display: block;
width: 50%;
float: left;
to add to my li class.. but I'd still need a li class right? Any help is greatly appreciated!
<div class="entry-content content homepage-agents">
<?php while(have_posts()): the_post();?>
<?php the_content();?>
<?php endwhile;?>
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">
<div class="x-column x-sm x-2-3";>
<div class="agent-data">
<?php
/**
* Detect plugin. For use on Front End only.
*/
require_once(ABSPATH . 'wp-admin/includes/plugin.php');
if(is_plugin_active('consulenten-plugin-business/consulenten-plugin-business.php')): $jm_cplb = new ConsulentenpluginBusiness(); endif;
if(is_plugin_active('consulenten-plugin-lite/consulenten-plugin-lite.php')): $jm_cplb = new ConsulentenpluginLite(); endif;
$array_boxes = (array)$jm_cplb->jm_cplb_loadjson();
This is some css..
}
.agent-container {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.agent-item {
width: 100% !important;
margin-bottom: 60px;
}
2 of my pages in mobile aren't going full 100% width, you can see it here.
I've got <meta name="viewport" content="width=device-width" /> in my code, and I've tried various variations of it. The problem could be in my pages.phpfile, since the rest of the pages are custom templates?
Here's my code for page.php:
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content .site-content -->
</div>
<?php get_footer(); ?>
CSS:
#content {
margin: 0 auto;
max-width: 51em;
background: none;
float: none;
margin: 0 auto;
padding: 0;
}
#primary {
width: 100%;
}
I don't know if I'm missing something that's wordpress related, or messed up my code (I'm a beginner at coding), or what. Confused because my other pages are working alright and I can't see anything in the code that's causing it to be that thin width.
*btw - haven't figured out the nav in mobile yet, but you can see that it works in the other pages by checking out the link:
Home.
Everything is correct but I see scroll because your footer got some non-responsive codes.
in this page:
http://melmencarelli.com/about/
first, add box-sizing: border-box; to #footer-container and set width: 100% like this:
#footer-container {
width: 100%;
margin: 0 auto;
padding: 30px;
box-sizing: border-box;
}
then, set width: 100% for .footer-info, like this:
.footer-info {
float: left;
width: 100%;
margin-bottom: 25px;
}
in this page:
http://melmencarelli.com/
Do above instruction then set width: 100% for:
#media only screen and (max-width: 1023px) and (min-width: 0px)
#media only screen and (max-width: 1023px) and (min-width: 0px)
#media only screen and (max-width: 500px) and (min-width: 0px)
html input[type="button"] {
font-size: 14px;
padding: 20px 20px;
width: 100%;
}
also I see this:
<div class="home-button">
<a href="http://melmencarelli.com/mentoring/">
<input type="button" value="HOW WE WORK TOGETHER">
</a>
</div>
I recommend you to use this:
<div class="home-button">
<a href="http://melmencarelli.com/mentoring/">
<button>HOW WE WORK TOGETHER</button>
</a>
</div>
well, all looks good!
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here