EDIT:
I change the css and the rows are there. But now, Ths columns are not with the same size. Anybody can help me?
.products { /*****styling products*****/
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
margin-right: 0.5rem;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
flex-grow: 1;
flex-basis: 20%;
display: flex;
}
I'm working hard to make my own woocommerce theme, but somehow, I did something that broke the default css and besides everything, I have now a big problem with my shop page, the products are shown in list (as expected), but I only can handle the number of products displayed per page, I can't choose the number by row or column, I couldn't show rows, just one.
I have decided to start over, but my last host is this: Anybody knows a way to bring the default css back? It could save me tons of work.
If I use another theme, everything works.
My shop: www.quickgamestore.ml
How did you install your woocommerce? If you uploaded it yourself, you can easliy extract the CSS File you need.
Otherwise, try to get the Template you are using and extract the CSS File there.
Related
I am a high school student who is trying to make own website. If I write only block element, it works properly but If it is in html code, not working. That is like inline elements. Sometimes works, sometimes not. No idea what happened.
That is what I have written:
<?php
echo "<div>test</div><div>test</div><div>test</div><div>test</div><div>test</div>";
?>
Sorry for bad English.
Assuming you want it to be a vertical list instead of a horizontal one, the reason it's going horizontal is your newsfeed class has display: flex; set, removing this will make it the same as the one at the top
Inside your index.css file, this is the section that's affecting it becoming a vertical list
.newsfeed{
width: 100%;
height: 100%;
padding: 1rem;
display: flex; // this line
flex-wrap: wrap;
flex-flow: row wrap;
}
This should be tagged under #html or #css, as it's not the PHP that's causing the issue.
I'm trying to make this product page and have the items all in there but the problem is the pictures for each item are different size. I tried using Hard Crop but it didn't work.
I want the best solution for this that takes up the least amount of time and is the easiest.
http://burnabycitycomputers.com/shop
Change the style to the woocommerce.css file in line no.48
.woocommerce .page-wrapper img {
height: 150px;
width: 100%;
}
Add this style to your style.css file
.woocommerce .t-entry-visual {
height: 150px;
width: 100%;
}
If no tricks worked out put an !important over to your css and this should make a trick for you. I have not used important if needed you pursue that.
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
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❤️
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.
I am working on a WordPress site and there is something that I just can't figure out no matter how hard I try. I want to have a grid similar to this (http://www.elegantthemes.com/gallery/origin/) but more like this: (http://themeforest.net/item/hercules-portfolio-business-wordpress-theme/full_screen_preview/5124743). You'll see that in the hercules theme the grid is only at the top of the page. I want to do something similar to that at the middle of the page. Unfortunately I cannot switch themes to get that one function. So I wanted to know how I would create my own version. Can someone point me in the right direction?
P.s. the grid does not need to have any fancy zoom animation and doesn't even have to be linkable. Just static pictures like that in a grid of 4x2. No spacing or padding or margins between the images. And I contacted the designer of that theme and he mentioned that it is not a plugin that does it. It's custom CSS3. He wasn't any more helpful then that though :/
I'd use an unordered list to contain the images, float the list items and apply a 25% width. The images then need a 100% width, and max-width 100% and height: auto a for responsive layout. The images you upload would need to have the same height dimension (or you could set a fixed height on the list items, but risk losing some image content).
ul#picture_grid {
list-style: none;
width: 100%;
overflow: hidden;
}
#picture_grid li {
float: left;
width: 25%;
}
#picture_grid img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}