Featured Products overlapping and showing diagonal - php

Question

I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️

Answer 1

You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.