- This topic has 9 replies, 3 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
July 11, 2020 at 7:27 pm #1360515Kin
I would like to make all the column in same size, such as fixed heights size.
Do you know how can I do that?
https://drive.google.com/file/d/11W08AFSQcDFt-oYppt3DxTODlkzo9Pw3/view?usp=sharingI appreciated of your help
July 12, 2020 at 9:39 am #1361064LeoStaffCustomer SupportHi there,
Give this CSS a shot:
@media (min-width: 769px) { .page .woocommerce ul.products.columns-4 { display: flex; } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
July 12, 2020 at 8:49 pm #1361439KinHi Leo
It seems work on the index page.
However, would you please check my webpages, all of them look like the below image.https://drive.google.com/file/d/1IsqsjdZzk3_j9S6ha19lX6bHwgNxktEz/view?usp=sharing
July 13, 2020 at 8:43 am #1362162LeoStaffCustomer SupportTry the edited CSS instead:
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064July 13, 2020 at 8:48 pm #1362632KinDear Leo
After used your code to replace the default css, it seems working,
Did I make the correct setting?Your code:
@media (min-width: 769px) {
.page .woocommerce ul.products.columns-4 {
display: flex;
}
}Replaced default code:
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}July 13, 2020 at 8:50 pm #1362633LeoStaffCustomer SupportSorry not sure if I understand.
This should be all you need:
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064Not sure what you meant by replacing the other block?
July 13, 2020 at 9:10 pm #1362643KinI found there is a lot of built-in CSS code under the below place
Appearance > Customize > “Additional CSS”As you provided the CSS code, do I need just paste wherever place inside the “Additional CSS”?
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064or do I need to replace the below code inside the “Additional CSS”, it is because below code look like the similar stuff.
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}July 14, 2020 at 9:02 am #1363335LeoStaffCustomer SupportNo need to remove any existing code in Additional CSS.
Simply add the new code:
https://generatepress.com/forums/topic/theme-lh-consulting-prime-integrate-the-column-height/#post-1361064Below the last line of the existing CSS.
July 14, 2020 at 7:44 pm #1363763KinDear Leo
Thanks for your help,
I followed your instruction not remove any existing code and pasted the code you provided, it all fixed on desktop and ipad verison. Look exactly what I want.Do you know how can I also fix this problem on the mobile version as well?
ThanksJuly 15, 2020 at 1:19 am #1363948DavidStaffCustomer SupportHi there,
try adding this CSS:
@media(max-width: 768px) { .woocommerce .products ul, .woocommerce ul.products { display: flex; flex-wrap: wrap; } .woocommerce ul.products li.product { margin-right: 10px; } }
-
AuthorPosts
- You must be logged in to reply to this topic.