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.
Related
I'm currently working on a materialize project and I have a problem with the grids.
Indeed, my php generate 4 columns l-4 and the 4th go to the right side as show here
<div class="row equipe">
<h2><?php echo 'Equipe n°'.$data2[1].' '.$nomjeu2[0]?></h2>
<?php
$stmt3->execute(array($data2[0]));
while($infoplayer = $stmt3->fetch()){
?>
<div class="col s12 m6 l4">
<div class="card-panel">
<img class="responsive-img" src="<?php echo $infoplayer[2]?>">
<p><?php echo $infoplayer[1]?></p>
<?php if($infoplayer[3] != ''){?>Twitch<?php } ?>
</div>
</div>
<?php } ?>
</div>
I don't really know what do to do here some help would be appreciated :D
Currently Materialize's grid is based on floats and it gets broken if cards are not of the same height. The card that is larger in the first row pushes the second row to the right. To avoid that it's easier to use custom styles with flex or grid.
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.
So I've written this script that checks whether the visitor is using a mobile device or a desktop in order to determine whether to display a background video or not (if it's a mobile device the output will be static image instead).
For some reason I end up seeing a play button centered overlaying the background image on the mobile layout. This is the code (note: site is based on WP and uses the wp_is_mobile() function to determine device) -
<section class="hero">
<?php
/*
Display background image
*/
if ( (get_field( 'hero_display' ) == 'image') || (wp_is_mobile()) ) :
$hero_image = get_field('hero_image');
?>
<div class="background-image" data-sm="<?php echo $hero_image['sizes']['sm']; ?>" data-md="<?php echo $hero_image['sizes']['md']; ?>" data-lg="<?php echo $hero_image['sizes']['lg']; ?>"></div>
<?php endif; ?>
<?php
/*
Display background video
*/
if ( (get_field( 'hero_display' ) == 'video') && (!wp_is_mobile()) ) :
?>
<div class="background-video">
<video autoplay="autoplay" preload="auto" poster="<?php the_field( 'hero_capture' ); ?>" loop="loop" muted="true" class="background-video">
<source src="<?php the_field( 'hero_source' ); ?>" type="video/mp4">
</video>
</div>
<?php endif; ?>
</section>
You may view the work in progress here - http://52.17.182.78
Any help or directions is much appreciated.
Edit: Solved! There are some tricks required for everything to display correctly on iOS7+ (and also possible on Android devices), see this article -
https://css-tricks.com/custom-controls-in-html5-video-full-screen/
Well, what about trying it the other way around? Make the image as default and if it is not on mobile, try to use video ;)
Try to add the attribute controls="false" to the video tag.
I'm using Bootstrap to create a image gallery
'<a href="../'.$img.'" class="col-sm-4 image-col" data-gallery>';
'<img src="../'.$img.'" class="img-responsive">';
'<figcaption>';
$desc;
'</figcaption>';
'</a>';
For some reason there are gaps when the gallery is processed.
I'm grabbing the data from a for loop and there should be no gaps.
All the images are the same height.
See below for better view
I have a small issue. I searched for relative issues but couldnt find anything.
I would like to fix this issue without Scripting if possible, and without adapting body width.
So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
I've tried playing with body width and setting it in other container. No Luck.
You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.
And here is the code:
http://jsfiddle.net/NCZg8/4/`
>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
</a>
</body>`
Note: try to stretch the "Result" Window and u will see what i mean.
Ty in advance.
In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.
.Logo_wrapper{
position:absolute;
top:40%;
right:5%;
z-index:10;
}
Updated fiddle: http://jsfiddle.net/NCZg8/6/
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your problem of margin can probably be fixed with css.