I Need help about mobile look customizations.

Edit: In case you need my site address is puffliquids.com

Hello everyone,

I’m trying to a couple of customization on the theme but im stuck and I couldn’t find the solutions on the forum.

  1. I want to disable 728x90 banner and the menu trigger icon on mobile.

I want to show the menu in open form like this:

  1. I want to arrange footer texts to center, is that possible?

  1. On product page, comments and description sections looks like this:

I want to change them like this:

As you can see any value under 20px looks okay. I changed font size from [ .woocommerce div.product .woocommerce-tabs ul.tabs li a ] on style-blue.css but it didn’t affect mobile look. How can I change this value for mobile?

Thank you, have a nice day!

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

  1. hide menu trigger and banner:

@media (max-width: 991px){
#mobile-menu-trigger {
display: none;
}
.header-banner {
display: none;
}
}
@media screen and (max-width: 767px){
.header-banner {
display: none;
}
}

1.2 menu form cannot be displayed without menu trigger, that’s not possible
2. text in the center:

@media (max-width: 991px){
.site-footer .widget {
text-align: center;
}
}

  1. text size can be changed here but not the layout:

@media (max-width: 991px){
.woocommerce div.product .woocommerce-tabs .wc-tab h2 {
font-size: 17px;
}
.woocommerce div.product .woocommerce-tabs .wc-tab p {
font-size: 12px;
}
}

Thanks!
Colorlib Support Team

Thank you for your help Noda.

Everything looks okay but social media icons and copyright text also should be aligned to center. Can you help me with that?

Hi there,
Thanks for keeping in touch.
In his case, could you possibly provide us with a link to the site so that we can have a closer look into this.

I look forward to your reply.
Best Regards,
Support.

Hello again, my website adress is: www.puffliquids.com

Now, add this css please

@media (max-width: 991px){
div#menu-social {
float: none !important;
}
.copyright-text.pull-right {
text-align: center !important;
}
}