Change Grid & Header for Mobile | PenciDesign Support

PenciDesign replied

6 years ago

Staff Reply

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

Foodreich replied

6 years ago

Customer Reply

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

PenciDesign replied

6 years ago

Staff Reply

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

Foodreich replied

6 years ago

Customer Reply

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

PenciDesign replied

6 years ago

Staff Reply

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

Foodreich started the conversation

6 years ago

Conversation Start

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