1. Is it's possible to use an 2 Image Grid Layout just for Mobile instead of only 1 Image? Desktop should stay with a 3 Image Grid Layout. Do I need a code to do that? (see attachment)
2. How can I change the header for mobile? My logo is to big on mobile screens and I want to get rid of the social icons, to have a minimal header on small devices. Is there an option to adjust that? (see attachment)
@media only screen and (max-width: 768px){
.penci-top-bar, #header .inner-header, .main-nav-social, #top-search.shoping-cart-icon{ display: none !important; }
}
b) Go to Customize > Logo and Header Options > and check to "Display Logo on Horizontal Navigation on Mobile" and "Move Logo on Horizontal Navigation on Mobile to Center"
Wow, this css code is like magic :D My mobile header looks awesome now - Thank you!
About the 2 column grid for mobile, I want it for the main page, where all blog posts are listet but also for category page. I build this category page with elementor. Probably it's only possible for the main page, because its generated by the theme right?
Hello, thank you for the link. My homepage/startpage isn't build with elementor. Can you send me a code snippet just to change the grid for this page? I found here at the support page a code for showing the WooCommerce product page in only 2 columns for mobile, which worked perfectly. I need the same for the homepage. Here is the example i found:
Hello,
I have 2 questions:
1. Is it's possible to use an 2 Image Grid Layout just for Mobile instead of only 1 Image? Desktop should stay with a 3 Image Grid Layout. Do I need a code to do that? (see attachment)
2. How can I change the header for mobile? My logo is to big on mobile screens and I want to get rid of the social icons, to have a minimal header on small devices. Is there an option to adjust that? (see attachment)
Here my staging page
Thank you so much, Greetings
Joana
Hi,
1/ Do you want to change layout to 2 columns on this page: http://www.foodreich.com/stg_c43f7/ or this page: http://www.foodreich.com/stg_c43f7/?page_id=3422 ?
2/ Please try do following steps here to do that:
a) Add more this code to Customize > Custom CSS:
@media only screen and (max-width: 768px){ .penci-top-bar, #header .inner-header, .main-nav-social, #top-search.shoping-cart-icon{ display: none !important; } }b) Go to Customize > Logo and Header Options > and check to "Display Logo on Horizontal Navigation on Mobile" and "Move Logo on Horizontal Navigation on Mobile to Center"
Best Regards,
PenciDesign
Wow, this css code is like magic :D My mobile header looks awesome now - Thank you!
About the 2 column grid for mobile, I want it for the main page, where all blog posts are listet but also for category page. I build this category page with elementor. Probably it's only possible for the main page, because its generated by the theme right?
Thank you for your help
Joana
Hi,
No - you can do both.
You can config your homepage by use Elementor by do following this video tutorial.
And on the Elementor option, you can see option for change the columns - you can apply it for desktop, tablet and mobile also
Best Regards,
PenciDesign
Hello, thank you for the link. My homepage/startpage isn't build with elementor. Can you send me a code snippet just to change the grid for this page?
I found here at the support page a code for showing the WooCommerce product page in only 2 columns for mobile, which worked perfectly. I need the same for the homepage. Here is the example i found:
@media only screen and (max-width: 479px){
.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product{
width: 48% !important;
margin: 0 0 2.992em !important;
}
Thank you soooo much ;)
Joana
Hi,
Ok, you can add more this code to Customize > Custom CSS to do that:
@media only screen and (max-width: 767px){ .penci-masonry .item-masonry { width: 50% !important; } }Best Regards,
PenciDesign