I have a problem in making my div row centered, i have 3 posts from wordpress which is equivalent to 3 columns inside the row, but it didn't centered after i add many css attributes to let it center. I am also using wordpress.
Here is my code :
<div class="row center-block">
<?php while ( $offerBlog->have_posts() ) : $offerBlog->the_post(); ?>
<div class="col-md-4 ">
<img src="<?php the_field('offer_image') ?>">
<br>
<br>
<h4><?php the_field('offer_title') ?></h4>
<?php the_field('offer_description') ?>
</div>
<?php endwhile; ?>
</div>
Here is my CSS:
.col-md-4 {
width:15%;
margin:0 2.5%;
text-align: center
}
.center-block {
margin-left:auto;
margin-right:auto;
display:center;
}
Try this:
Check demo HERE
CSS:
.center-block {
display: flex;
flex-direction: row;
justify-content: center;
}
I hope it helps
Related
I just create this div function:
<div class="row">
<div class="col-sm-12">
<!--<img src="images/article_image.png" class="img-responsive" />-->
<?php //echo $wordRow['article_image']; ?>
<h2 class="black_color" style="font-size: 25px; font-style:italic ;margin-left:15px">
<?php echo $wordRow['article_name']; ?>
</h2>
<div class="black_color" style="margin-left:20px; margin-right:20px; overflow-y:auto;">
<?php echo $wordRow['article_description']; ?>
</div>
</div>
</div>
which gives me this white form , which is part of this editor. By that I'm able to create articles on my site. Unfortunalety I get the scrolling on the side if the text is longer. I try do add
overflow-y:auto;
but that doesn't work. Putting a max length for the text doesn't work either. Basicly what I'm trying to do is to put a scrolling inside the white article form and not on the left of the page. Any ideas?
You can set two overflow properties, overflow-x and overflow y
Set the overflow-y to scroll and overflow-x to hidden on the same div and then it'll work just as well
If you give your divs ids and classes you can avoid inline-style and use css stylesheets (a lot easier!)
for example on the outer div you could give id of outer, and the inner div, inner. Your css/style section would look like this (example). Externally linked in stylesheets are preferred/recommended
#outer{height:100%}
#inner{width: 98%;
color:#000000;
overflow-y:scroll;
overflow-x:hidden;
margin-left: 20px;
margin-right:20px;
}
h2{color:#000000;
font-size: 25px;
font-style:italic ;
margin-left:15px}
This helps too:
#outer {
height: 100%
overflow: hidden;
}
#inner {
width: 98.5%;
position: fixed;
overflow:auto;
bottom:23px;
top: 137.5px;
}
<div id="outer">
<div id="inner">
<h2 class="black_color" style="font-size: 25px; font-style:italic ;margin-left:15px"><?php echo $wordRow['article_name']; ?></h2>
<div class="black_color" style="margin-left:20px; margin-right:20px;"><?php echo $wordRow['article_description']; ?></div>
</div>
</div>
Either way is good.
This helped me pretty much.
<div style="height:100%; overflow:hidden">
<div style="width:98.5%; position: fixed; bottom:23px; top: 137.5px; overflow:auto">
<h2 class="black_color" style="font-size: 25px; font-style:italic ;margin-left:15px"><?php echo $wordRow['article_name']; ?>
</h2>
<div class="black_color" style="margin-left:20px; margin-right:20px;">
<?php echo $wordRow['article_description']; ?>
</div>
</div>
</div>
I now get the scrolling inside the form, like this and the whole page stays in place. So will the text stay inside the the white form.
I have a 3 col set up and when the page loads the two outer columns get pushed to the bottom of the screen. I can't move them using margins and believe it may be related to the center column which imports an external feed. I've spent hours on this with no resolution in sight. Any help would be extremely grateful for. webpage http://carrickswan.com/fix-test/
Sorry about the inline css it makes it look messy but hopefully someone can see the issue from the live page.
<!-- col 1 -->
<div style="background-color: white; width: 18%; margin: 25px 20px 0px 40px; display:inline-block;">
<div>
<h2 style="width: inherit; color: white; background-color: #2e2d2d; padding: 5px; background-image: url('http://carrickswan.com/wp-content/uploads/2016/04/header-bg2.png');
background-repeat: no-repeat;
background-position: right;" class="col-title">PLAY ONLINE</h2>
<img src="http://carrickswan.com/wp- content/uploads/2016/04/pay.jpg" alt="play swan lotto">
</div>
<div>
<h2>MEMBERSHIP</h2>
<img src="http://carrickswan.com/wp-content/uploads/2016/04/membership.jpg" alt="pay swan membership">
</div>
</div>
<!-- col 2 -->
<div id="content" style="background-color: white; width: 50%; display:inline-block; margin: 25px;">
<div id="content_fixtures"></div>
</div>
<!-- col 3 -->
<div style="width: 18%; display: inline-block; margin-top: 0px; background-color: white;">
<h2 class="title" style="color:white; background-color: #2e2d2d; padding: 5px; background-image: url('http://carrickswan.com/wp- content/uploads/2016/04/header-bg2.png'); background-repeat: no-repeat;
background-position: right;">LOTTO</h2>
<?php $cat_id = 7; //the certain category ID
$latest_cat_post = new WP_Query( array('posts_per_page' => 1, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post(); ?>
<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" ><?php the_title(); ?></a></h2>
<div style="padding:5px;">
<?php the_content($more_link_text,$strip_teaser); ?>
Read More
</div>
<?php endwhile; endif; ?>
</div>
Add vertical-align: top; to the two outer divs - I tried it on your page and it worked.
if you don't want to make them align top
here is the solution
wrap your 3 divs within container
<div class="main-container">
<div class="column one">
<div class="column two">
<div class="column three">
</div>
CSS
.main-container
{
display:flex;
}
.main-container .column
{
flex:1;
}
I am working on a WordPress site and developing the blog posts page. I have set it up so you have the posts on the left and the sidebar on the right. But I have placed the sidebar code at the top of the page with logic to determine which side the users wants the sidebar.
The problem I was trying to solve was if the sidebar code is at the top in mobile devices it will be shown before the blog posts. So I found a method that uses table features to help resolves this. This works fine for all pages except the blog posts, when I resize, the thumbnail image is shown at it's full size despite me constraining it to the max width of the container.
PHP/HTML:
<?php get_header(); ?>
<div class="wrapper">
<?php if ( get_theme_mod( 'realestatepro_sidebar_position', esc_attr__( 'right', 'realestatepro' ) ) == "left" )
{ echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar left-sidebar">'; }
else
{ echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar right-sidebar">'; }
?>
<?php get_sidebar(); ?>
</div>
<div class="col-xs-12 col-sm-9 col-md-9 feature">
<div class="col-xs-12 col-sm-12 col-md-12 blog-article">
<?php
if( have_posts() ):
while( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="col-xs-12 col-sm-12 col-md-12">
<?php the_title('<h3 class="entry-title">','</h3>' ); ?>
<small>Post in:<?php the_category(' '); ?>, by <?php the_author_link(); ?> on <?php the_time('F jS, Y'); ?></small>
</div>
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-12 col-md-12">
<?php the_post_thumbnail('full'); ?>
</div>
<?php endif; ?>
<div class="col-xs-12 col-sm-12 col-md-12">
<?php the_content(); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<hr>
<div class="col-xs-6 text-left"><?php previous_post_link(); ?></div>
<div class="col-xs-6 text-right"><?php next_post_link(); ?></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<hr>
<?php
if( comments_open() ){
comments_template();
}
?>
</div>
</article>
<?php endwhile;
endif;
?>
</div>
</div>
</div>
<?php get_footer(); ?>
CSS:
.blog-article img {
height: auto;
max-width: 100%;
margin: 10px 0px;
}
.left-sidebar {
float: left;
}
.right-sidebar {
float: right;
}
#media (max-width: 767px) {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: none;
}
.wrapper {
display: table;
float: right;
}
.sidebar {
display: table-footer-group;
}
.feature {
display: table-header-group;
}
}
You could try the fixed table layout:
.wrapper {
display: table;
width: 100%; /*added*/
table-layout: fixed; /*added*/
}
Of course, the image should be set as:
img {
max-width: 100%;
height: auto;
}
https://jsfiddle.net/n7bpz5sj/1/
The proper way to do layouts where you need to change the ordering of divs is with flexbox using the order property. In your case, the responsive layout would look something like this:
.wrapper {
display: flex;
flex-direction: column;
}
.sidebar {
order: 2;
}
.feature {
order: 1;
}
Here's the problem:
`http://jsfiddle.net/5gju85un/3/`
I want to prevend div #3 from moving higher while keep float left.
How can I do that?
EDIT
These divs are created by loop in my original code so I can't just make two parent divs.
EDIT
Inserted whole code (I'm making own template to use in wordpress)
HTML/PHP
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) : $loop->the_post()?>
<div class="produkt ramka">
<div class="produkt_obraz">
<?php woocommerce_show_product_images();?>
</div>
<div class="produkt_nazwa">
<h3 class="produkt_litery"><?php woocommerce_template_single_title();?></h3>
</div>
<div class="produkt_cena">
<?php woocommerce_template_single_price();?>
</div>
<div class="produkt_line">
</div>
<div class="produkt_opis">
<?php the_content();?>
</div>
<div class="produkt_koszyk">
<?php woocommerce_template_loop_add_to_cart()?>
</div>
</div>
<?php endwhile;
}
CSS
.produkt
{
display: inline-block;
height:auto;
min-height:120px;
width:49.50%;
margin-bottom:5px;
background-color:#252525;
overflow:hidden;
}
.produkt:nth-child(2n+1)
{
float:left;
}
.produkt:nth-child(2n)
{
float:right;
}
As you can see the code I've done in jsfiddle is based on this
demo
<div class="divs st">div1</div>
<div class="divs nd">div2</div>
<div style="clear:both"></div>
<div class="divs rd">div3</div>
<div class="divs th">div4</div>
<div class="divs">div5</div>
<div class="divs">div6</div>
I solved The proble...The solution is here:http://jsfiddle.net/4Z8np/48/
I generated this HTML code by a PHP function:
<div class="columns">
<?php
foreach($rows as $rows))
{?>
<div class="row">
<?php echo $row->content ?>
</div>
<?php } ?>
</div>
CSS:
div.columns{
width:100%;
}
div.rows{
width:50%;float:right;border:1px solid red
}
The structure is something like this:
<div class="columns">
<div class="rows">
<p>text</p><p>text</p><p>text</p>
</div>
<div class="rows">
<p>text</p>
</div>
<div class="rows">
<p>text</p><p>text</p>
</div>
<div class="rows">
<p>text</p>
</div>
</div>
http://jsfiddle.net/4Z8np/4
4/
The result is many red box in 2 colums beside each other...right?
My Problem:
The height of Red boxes are not same...and some times just one box is in a row.
I Want to:
I want to set each 2 Red box in each row with a same height.(according to bigger height not fix height)
How can do it?
EDITED:
http://jsfiddle.net/4Z8np/44/
This result is ugly...for example text7 has gone to a new line!
At least I wana text7 comes right after latest colums...
how about using css display: (table|table-row|table-cell)?
http://jsfiddle.net/4Z8np/46/
div.table{
display: table;
width: 100%;
height: 100%;
}
div.row{
display: table-row;
height: 100%;
}
div.cell{
border:1px solid red;
display:table-cell;
}