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;
}
Related
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 :)
I'm currently trying to find a way how to fill flex parent with flex childs. I have data in the database, so i pick those data by foreach loop. The thing is I want to have 4 flex children per row, as you can see in the following screenshot.
And I just can't think about any loop which could let me do this.
<div class="grid">
<?php foreach ($categories as $c): ?>
<div class="grid-row">
<div class="grid-pivot"><?= $c['categoryJmeno'] ?></div>
</div>
<?php endforeach; ?>
</div>
Thanks for any advice!
Just apply a width to those elements via CSS:
.grid-pivot {
width: 25%;
}
or maybe a little less (24%) if that doesn't work due to whitespace or similar.
If you want padding, include it and add box-sizing: border-box
.grid-pivot {
box-sizing: border-box;
width: 25%;
padding: 30px;
}
And if you want margin (like in the image you posted), use calc for the width to include it:
.grid-pivot {
width: calc(25% - 60px);
margin: 30px;
}
How can I avoid line breaks in a div when I use a php funcion. My code is HTML is
<div class="toolbar">
<div style="float:left; ">
Profile <?php get_search_form(); ?>
</div>
</div>
and my code in css is
.toolbar {
background: #F2F2D7;
width: inherit;
font-family: "Palatino";
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
top: 0;
box-shadow: 0px 4px 9px 2px #888888;
z-index:2;
white-space: nowrap;
}
with that I obtain something like:
<p> Profile </p> <p> Buscador </p>
<p> and what I want is </p>
Profile Buscador
It depends on what get_search_form() is returning. If it is returning a string, then you may need to look at the applied styling for the containing div.
If it is returning an an HTML fragment (e.g., <span>your result</span>), you may need to adjust the results to not include any embbed div tags.
It sounds like your looking for the <span> tag. Its used to divide segments of HTML for styling.
Yes, as user197092 said, this is a php problem, and if it is a predifined function it could be hard to adjust the result to not include embbed div tags. I solved it using flex, my code is:
<div id="toolbar">
<div id="toolbar1">
Profile
</div>
<div id="toolbar2">
<?php echo get_search_form(); ?>
</div>
</div>
and for CSS
#toolbar {
display: flex;}
#toolbar1 {
flex: 1;}
#toolbar2 {
flex: 2;
margin-left: 10px; }
this worked for me
thanks for assisting.
I'm having an issue in which my DIV class named box-2 is only applying itself to the title of the section, even though I closed it around the entire code. I'm very new to PHP, so I'm wondering if there is something I'm overlooking.
<div class="box-2 shadow">
<?php if (get_field('highlights')) { //Sub speciality ?>
<div itemprop="Restuarant Highlights">
<h3 class="content-title">Highlights</h3>
<ul>
<?php $terms = get_field('highlights'); ?>
<?php foreach ($terms as $term){ ?>
<li><div class="sl-highlights"><span class="icon-ok-circled"><?php echo $term->name; ?></span></div></li>
<?php } ?>
</ul>
</div>
</div>
<div class="clearboth"></div>
<?php } ?>
I need the box-2 class to be applied to everything, as it spaces out the entire section for me.
EDIT: This pulls the data from a taxonomy, and displays it like:
Bananas Apples Pears Lemons Grapes
Peaches Strawberrys
Here is the CSS:
.box-2 {
width: 100%;
border-top: 1px solid rgba(0,0,0,.05);
margin-bottom: 7px;
padding: 12px 0 3px 0;
}
.sl-highlights {
float: left;
margin-right: 4%;
font-size: 14px;
min-width: 135px;
line-height: 25px;
}
.content-title {
font-size: 18px;
color: #444;
padding-bottom: 9px;
font-weight: bold;
font-family: 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
}
Thank you very much for any and all help!
Anytime you apply a float style to an element, you remove it from the normal document flow; basically, the element doesn't reserve the space it normally would. Since that's what normally defines the height of it's container, the container tends to collapse to the height of the next element that is in the normal flow.
In your case, since all of the elements that have content are floated, box-2 collapses to a zero height. If you want it to still contain the floated elements, add an overflow: auto; rule to .box-2.
You can simplify your markup a bit by eliminating the <div> elements that currently have the sl-highlights class and instead apply the class to the <li> elements. I'd probably add a display: block rule too, since technically it's invalid to have a block-level element (the <h3> tags) inside an inline element (the <li> element).
i am new to css .. i can easily fetch the suggestions from the back end to the suggestion div.
Height of suggestion div is set to height:auto as it is adjusted automatically depending on the suggestion as shown
<div class="suggestBox">
<div class="suggestionsBox" style="margin-left:16px">
<div class="suggestions bordered" style="height: auto; max-height: none; width:100%; overflow: hidden; padding: 0px; ">
<div class="jspContainer" style="width: 100%; height: 0px; ">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100%; ">
<div class="items_block"></div>
<div class="users_block"></div>
</div>
</div>
</div>
</div>
but as it's height is altered i.e grown .. the elements under the suggestion box or div are scattered or something like that ... do i have to change something in CSS ..
//THANX
For maintaining depth of layers in CSS there is z-index property.
Try giving it position:absolute; to remove it from the document layout.
See this tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/