On my shop's front page, my products add to cart buttons is not aligned.
See this picture
A fix to this would be to just make the titles shorter or make every title be on 2 lines, but that would bring me more problems on my category pages.
Is there a way to just fix this here on the front page?
Option #1: Set position: relative and optionally a min-height on your li.product and set position: absolute and bottom: 0 on your [Add to cart] buttons in your theme's CSS. Note that your theme may be using different classes/IDs. If the ones I've used don't work, you'll need to inspect with your browser's inspector tools to see which to use for your theme:
li.product {
position: relative;
min-height: 400px; // you may or may not need to set the height
}
li.product a.button {
position: absolute;
left: 0; // combined with right: 0, will center the button
right: 0; // combined with left: 0, will center the button
bottom: 0;
}
Option #2: Set a min-height on your product's title (e.g., h2)
li.product h2 {
min-height: 100px; // Adjust to account for your shop's product with the longest title
}
Related
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.
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%;
}
Let's say that I am an admin of a certain website.
I am using latest release of Wordpress, my theme is a child theme of a theme called "Twenty Fourteen". I am using Mozilla Firebug to inspect elements I want to edit.
The page does not display in full width and there is still some unused space left (it is visible on the right). I would like to widen the page. How to do this? I have a Full Width template, setting all pages to this however does not work.
I am looking for a CSS solution (to edit the style.css of my child theme).
If anyone could help me, I would be really thankful. :)
So you want a full width page?
I've got some suggestion for you:
1. Use a CSS Framework like Bootstrap
Bootstrap will allow you to make a full width page without any problems. On top of that it will make your website responsive. Read more....
2. Use your own CSS
You need to make your body use all the space there is. You can't just use
body
width: 100%;
height: 100;
}
This would make the body take as much space as the children needs.
The body has always some margin and padding. So you need to get rid of that too.
body {
margin: 0;
padding: 0;
}
The last step in your CSS would be a fixed position for all 4 sides and make the position relative:
body{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
So your final CSS should look like this:
body{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
}
I suggest you to use a Framework, which makes your workflow alot easier.
Regards,
Megajin
You can try to override this css code:
.site {
width: 100%;
position: relative;
margin-left: 0px;
}
.site-header {
position: relative;
width: 100%;
z-index: 4;
}
Otherwise if you choose framework then you can easily integrate and understand "matirialize css" OR Bootstrap.
http://materializecss.com/about.html
I can't for the life of me figure out why the drop down when hovering over the "about" menu item is appearing behind the images, see this link http://www.ziprfit.com.au/index.php (I hope it's OK to post the link).
All search results suggest z-index, well the z-index for the images in there goes to 6, and I've set the menu to 100 and it still appears behind the images.
On the server side this is generated by PHP.
Thanks for your help.
Add position: relative; in your #nav ul ul
#nav ul ul {
z-index: 100;
display: none;
position: relative;
}
Add position: relative; and z-index: 100; to your #nav div :)
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;
}