I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
Related
<div class="row">
<div class="large-12 columns">
<div class="row collapse featured-option">
<input id="featured" name="featured" type="checkbox" style="display: none;" <?php echo esc_attr( $featured_disabled ); ?>>
<span class="custom checkbox <?php echo esc_attr( $featured_disabled ); ?>"></span> <?php echo sprintf( __( 'Feature Proposal %s', APP_TD ), sprintf( _n( '(1 credit)', '(%d credits)', hrb_required_credits_to('feature_proposal'), APP_TD ), hrb_required_credits_to('feature_proposal') ) ); ?>
</div>
</div>
</div>
I'm trying to edit this wordpress theme code to use it for my own website.
But I don't know why style="display: none;" is needed here.
When I erase this style element, I get checkbox on the screen
but the functions are not working as it should be.
What's wrong with this? Why need "display: none"?
Please help
In this instance it is simply just hiding the checkbox. When
style = "display:none;"
is used, the page will be displayed as if the item does not exist. Meaning the layout of the page will not show a "hole" or something where that item is missing. In other words, the layout will not be affected by this.
The other way to hide something would be with,
style = "visibility:hidden;"
However, the page layout will be affected and the hidden item will still take up the same space.
Depending on what was trying to be accomplished, the checkbox could be hidden for different reasons. It's possible that the programmer of this code wanted to hide this checkbox by default and then show it later on after certain events occurred. Additionally, there are times when it is best to show and hide objects as you need them or don't need them rather than constantly recreating or deleting them.
I've started diving into WP code for theme customization, yet I suddenly saw a serious bootstrap column fla where I can't really locate the problem.
I've designed the blog section as col-xs-12 col-sm-4 for the thumbnailed side image, and col-xs-12 col-sm-8 for the content itself. Everything is fine and dandy in all size stretches except for 768px-990px where the columns start to overlap each other, in approx the same size as the margin they should have from each other.
Here is the code:
<div class="row">
<?php if( has_post_thumbnail()): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail-img"><?php the_post_thumbnail('medium'); ?>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<p><?php the_content(); ?></p>
</div>
<?php else: ?>
<div class="col-xs-12">
<p><?php the_content(); ?></p>
</div>
<?php endif ?>
</div>
Here are a few pictures to emphasize:
EDIT:
I changed, just to check, what happens if instead the 8-4 row, I will do a 6-6, and it works great (picture included below). isn't 8 + 4 = 12? what am I missing here?
Try giving image width 100% so that it fits in div when resizing.
Or create a fiddle and share link.
I've found out that wordpress doesn't really play nicely with bootstrap since the_post_thumbnail('$string') would overlap the bootstrap column grid if they aren't set right (WP doesn't auto set the image width into a column restricted area.)
the_post_thumbnail('$string') receives the following set params:
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x
300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP
4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x
1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original
size uploaded)
There is no 100% for the_post_thumbnail('$string') yet i'm just guessing that it could be hardcoded into the function itself as a param.
My solution was either using $string = thumbnail or changing the grid to col-sm-6 for both columns.
Place the url of the image in a img tag with the img-responsive class.
I need to apply css3 properties to kartik time picker widget tried with
<div style=" position: none;">
<?php echo $form->field($model, 'checkin_time')->widget(TimePicker::classname(), [] )->label(false); ?>?>
</div>
But not able to get it, is there any way so to apply css3 properties?
I think you should use containerOptions is the array that set the HTML attributes for the main widget container
<?php echo $form->field($model, 'checkin_time')->widget(TimePicker::classname(),
['containerOptions' => ['style' => 'position:none;']] )->label(false); ?>
I'm trying to customize the navigation and header region of my Genesis 2 theme. Here is the code I'm using:
/* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
function new_header(){ ?>
<div id="title-area">
<div id="new-title">
<h1>new Title</h1>
</div>
<div id="new-nav">
<nav class="nav-primary" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><div class="wrap">
<?php
add_action( 'genesis_do_nav' );
?></div>
</nav>
</div>
<div id="new-search">
<p>Search Box will need to go in here</p>
</div>
</div>
<?php
}
add_action( 'genesis_before_header', 'new_header' );
The title is printing out fine, and the paragraph where I will want to add my search box is printing fine too. HOwever, for some reason I am not getting any output for my menu.
What am I missing? THere is nothing being printed at all when I inspect the element.
Thanks in advance.
Couldn't you alter the CSS of each of these elements the default way Genesis provides it? The only thing I see that is different from the default way is that you want a search box underneath the navigation.
If that's the case, then just add the function for the search box and position it after the nav. For example check below
add_action('genesis_after_header', 'move_my_nav');
function move_my_nav() {
echo '<div id="new-search">';
echo '<p>Search Box will need to go in here</p>';
echo '</div>';
}
I came across this site: http://www.jfletcherdesign.com.
I want to replicate how the home page shows the featured image of all of his posts and that when you click on the image you drill down into in the specific post. I also want to replicate how you are able to click forward and next with an image to the corresponding post within a category.
Can someone please point me in the right direction for setting up this functionality?
Bonus points if you can point me to the jQuery plugin that is being used for the rollover effect on his category page.
Thanks!
That site is based on the Imbalance theme by WPShower. It's a free theme so you can download it and check out all the source code. That should answer your first question.
To get images that act as pagination to the previous and next posts all you need to do is use the get_adjacent_post function. You can use something like the code below to set it up to link an image. Stick it in the bottom of your single.php or wherever you want the pagination to appear.
<?php
$prev_post = get_adjacent_post(true, '', true);
$next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
<a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
<a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>
Now for the jQuery rollover, it is pretty simple:
$(document).ready(function() {
$('.article').mouseenter(function() {
$(this).find('.article-over').show();
});
$('.article').mouseleave(function() {
$(this).find('.article-over').hide();
});
$('.article').hover(
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 0.3);
},
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 1);
}
);
});
Which acts on the following HTML markup generated by the theme:
<li class="article li_col1" id="post-1234">
<div class="preview">
<img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post">
</div>
<div class="article-over">
<h2>Cool Post</h2>
<div class="the-excerpt">
<p>Blah blah blah this is a post excerpt...</p>
</div>
</div>
</li>
So basically when you first go to the site, for all the items except the first, all you see is the .preview div that holds the category image. The .article-over div is absolutely positioned over the .preview div but has a style of display:none so that you can't see it.
When the mouseenter event is fired, the .article-over div is displayed via show(), and the image inside .preview fades out to an opacity of 0.3 allowing you to see the .preview div's black background behind it. When the mouse leaves, .article-over is hidden, and the .preview image fades back to fully opaque.
If you're still stuck let me know and I'll try to explain further.