Can we make our products line up in two rows on mobile. Right now they are one on top of the other. Can we have two side by side. I under stand that the images will be smaller and I’m fine with that. Thank you for the help in advance.
1 Like
Hi There,
Please provide us the site URL so we can take a look and provide a tailored custom CSS.
Thanks,
Hi There,
Please add the following CSS under Customizer > Custom > Global CSS:
@media (max-width: 767px){
.home .x-column.x-sm.vc.x-1-6 {
width: 50%;
float: left;
}
}
That worked awesome for the top boxes but it did not fix the products below.
Hi again,
Add the following code in your Customizer as well:
@media screen and (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}
}
Hope this helps!
Perfect!! Thank you!! Is there anyway to make that happen on the other pages as well. Here is an example http://vps28450.inmotionhosting.com/~outdoordogsupply/dog-fence/#invisiblefenceaccessories
Hi There,
Remove .home from the code provided by Thai
Hope it helps!
That did not work and it undid the home page as well.
Hi There,
Did you already resolve the issue? It seems your products are in by 2s in mobile now (https://prnt.sc/g8mr10)? Please clarify.
Thanks,
Sorry yes the products are but the boxes above the products are not. Could you tell me how to make those in 2s on the mobile.
Also is there a away to make it so the products that are in 2s only show on the phone. Right now it also shows on the iPad. The top Boxes on the home page don’t go in 2s on the iPad but the products do. http://vps28450.inmotionhosting.com/~outdoordogsupply
Hi There,
Use this @media query to apply your style specifically on 768px and 979px screen width which an iPad portrait is. This does not include iPad landscape (1024px) though, you can change 979px to 1024px if you want.
@media (min-width: 768px) and (max-width: 979px) {
/* CUSTOM CSS FOR IPAD HERE*/
}
Then add a CLASS to your section/content-band so we can easily target the 1/6 columns in it.
You can use this selector
.my-custom-class.x-content-band.marginless-columns .x-container .x-column.x-1-6
We need to do the selector like this so it is more specific than the default so it can overwrite it.
Then lets apply this property to those 1/6 columns using our selector.
width: 50%;
float: left;
1/2 marginless column is 50% right? If it is not a marginless it should be 48% because the 4% will go to the right-margin of the columns.
Your final custom CSS should look like this:
media (min-width: 768px) and (max-width: 979px) {
.selector {
property: value;
property: value;
}
}
Hope it helps,
Cheers!
This did not fix it
Hello There,
With @Friech’s reply, you are supposed to modify the css code because he gave an example code and not a working code. You should have something like this:
@media (min-width: 768px) and (max-width: 979px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}
}
Or using with @Thai’s code:
@media (min-width: 768px) and (max-width: 979px) {
.home .x-column.x-sm.vc.x-1-6 {
width: 50%;
float: left;
}
}
Again any of these work may or may not work. You would need to modify it and apply it to your site.
Hope this make sense.
Ok Please don’t hate me now. After I got the top boxes to go in twos with this code
@media (min-width: 768px) and (max-width: 979px) {
.home .x-column.x-sm.vc.x-1-6 {
width: 50%;
float: left;
}
}
The owner decided he would like the products boxes to go back to rows of 5. Like the top boxes on the iPad. Code you please tell me the code to make this happen.
Hello There,
I have checked your page and the css codes were starting to get mixed up. I must tell you that sooner or later, it will create a conflict which will affect other element or even the page layout itself. I would highly recommend that you indent, your css, label your css and add it in blocks. For example;
/* This block makes 4 columns */
.element {
// some styling
}
/* This block changes the height and color of the .... */
.other-element {
// some styling
}
This is not an actual code but just an example of how you can organize your css so that you can easily check which is which and easily find any errors when there is a conflict.
Since you want to display 5 columns, you can make use of your original code. Please find this block:
@media screen and (min-width: 980px){
.home .woocommerce.columns-4 li.product {
width: 17%;
margin-right: 2%;
float: left !important;
}
}
And replace it with this code:
@media screen and (max-width: 767px){
.home .woocommerce.columns-4 li.product {
width: 17%;
margin-right: 2%;
float: left !important;
}
}
Hope this resolves it.
This did not help with the 2 rows on the ipad they are still in 2s. Also when I changed this code it put the columns in 4s not in 5s on the desktop. Also Is there away to make the Boxes above the products in 2s on the mobile phone. Like we did on the home page. http://vps28450.inmotionhosting.com/~outdoordogsupply/garmin-alpha/ The boxes Above the products you see here.
Hello There,
As I have foresee it, the code you may have used after asking for support is now starting to pile up with conflicting issues. I would suggested a different solution to your problem which would somehow lessen the burden and future complexity of your layout. I can see that you are trying to achieve the following:
1.) Display 5 column product items
2.) Display 5 column products items on the ipad
3.) Display 2 column product items in smaller screens
I would recommend that you do this steps:
1.) Since you are using Visual Composer with the Recent Product or Products element, please define the 5 columns first.
2.) And then in your theme options, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)
@media(min-width: 768px){
.x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}
.x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}
This code will display 5 column product items in desktops, ipad portrait and ipad landscape
3.) And to display the 2 column product items in the smaller screens, you will then add this code:
@media(min-width: 768px){
.x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}
.x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}
@media(max-width: 767px){
.x-content-band .woocommerce.columns-5 li.product {
width: 49%;
margin-right: 2%;
}
.x-content-band .woocommerce.columns-5 li.product:nth-child(2n) {
margin-right: 0;
}
.x-content-band .woocommerce li.product.first {
clear: none;
}
}
I have carefully tested this in my local install so this steps when correctly implemented should work flawlessly.
How I got the width computation:
- 2% right margin for the number of columns minus one column because the last column will not have a right margin
Width = 100% - ( 2% * 4 columns ) / 5 columns
= 18.4%
We would loved to know if this has work for you. Thank you.
1 Like
It looks like this worked. Yah!!! Thank you!! One thing is there away to add a little space to the right and left. So there is a small boarder and the boxes don’t go right up to the edge. Thank you