Remove padding from mobile | PenciDesign Support

Penci Design replied

7 years ago

Staff Reply

Hi,

Please try with custom code:

@media screen and (max-width: 768px){
.site-main .vc_row {
    margin-left: 0;
    margin-right: 0;
}
.site-main .vc_row .vc_column_container > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}
.site-main .vc_row .widget-area {
    padding-left: 0;
    padding-right: 0;
}
.site-main .vc_row .widget-area .penci-block-vc {
 max-width: 100%;
}
}

I checked on your site on mobile with custom code http://prntscr.com/n4gf47

Best Regards,

PenciDesign

daimpa replied

7 years ago

Customer Reply

If you look at your video, you'll see that after you apply that customization, there's the blue background both on the left and on the right side of the page. But I don't want to show that background, this is the reason why I opened this ticket and the reason why you gave me the code in previous weeks :)

Penci Design replied

7 years ago

Staff Reply

Hi,

Please check video attachement how i check and fix the issue on your site.

Please send me video your website work after you add custom css below. Let me exact the issue you are facing .

@media screen and (max-width: 768px){
.site-main .vc_row {
    margin-left: 0;
    margin-right: 0;
}
}

Best Regards,

PenciDesign

Penci Design replied

7 years ago

Staff Reply

Hi,

I want login on your site and check all element of vc and find best solution for this issue.

I go to Customize > Addtional CSS then add custom css to fix this issue.

@media screen and (max-width: 768px){
.site-main .vc_row {
    margin-left: 0;
    margin-right: 0;
}
}

Please check it again.

Best Regards,

PenciDesign

Penci Design replied

7 years ago

Staff Reply

Hi,

Sorry , i still can't login on your site. Please check video attachement

Please try go to Customize > Addtional CSS then add custom css to fix this issue:

@media screen and (max-width: 768px){
 .site-main {
     overflow-x: hidden;
 }
}

Best Regards,

PenciDesign

Penci Design replied

7 years ago

Staff Reply

Hi,

I can't login on your site with infor you send.

I checked on your site and don't see the issue on your site.

Please check screenshot and send me your screenshot this issue.

http://prntscr.com/myxzb1, http://prntscr.com/myy00b

Best Regards,

PenciDesign

Penci Design replied

7 years ago

Staff Reply

Hi,

Please try use with custom css

@media screen and (max-width: 960px){
 .penci-topbar {
     display: none;
 }
 .site-main {
        padding-left:0;
        padding-right: 0;
    }
    .widget-area {
     padding-left: 10px;
     padding-right: 10px;
 }
    .single .penci-content-post {
     padding: 20px 15px;
 }
.site-content, .penci-page-style-1 .site-content, .page-template-full-width.penci-block-pagination .site-content, .penci-page-style-2 .site-content, .penci-single-style-1 .site-content, .penci-single-style-2 .site-content, .penci-page-style-3 .site-content, .penci-single-style-3 .site-content {
     margin-top: 0;
 }
.site-main > .penci-container-1080,
.site-main > .penci-container-1170,
.site-main > .penci-container,
.site-main > .penci-container-fluid,
.site-main > .penci-container-full {
    padding-left: 0;
    padding-right: 0;
}
}

Best Regards,

PenciDesign

daimpa replied

7 years ago

Customer Reply

Just one thing to add: there's still padding from 768 to 960px. Solution? THANKS!

Penci Design replied

7 years ago

Staff Reply

Hi,

Please go to Customize > Addtional CSS then add custom CSS to do that:

@media screen and (max-width: 768px){
 .penci-topbar {
     display: none;
 }
 .site-main {
        padding-left:0;
        padding-right: 0;
    }
    .widget-area {
     padding-left: 10px;
     padding-right: 10px;
 }
    .single .penci-content-post {
     padding: 20px 15px;
 }
.site-content, .penci-page-style-1 .site-content, .page-template-full-width.penci-block-pagination .site-content, .penci-page-style-2 .site-content, .penci-single-style-1 .site-content, .penci-single-style-2 .site-content, .penci-page-style-3 .site-content, .penci-single-style-3 .site-content {
     margin-top: 0;
 }
}

Best Regards,

PenciDesign

Penci Design replied

7 years ago

Staff Reply

Hi,

Please send me url article page you want remove padding from mobile or screenshot this issue. I will check it and add custom css to fix this issue

Best Regards,

PenciDesign

daimpa replied

7 years ago

Customer Reply

This doesn't work with article pages

Penci Design replied

7 years ago

Staff Reply

Hi,

Please try edit page then edit row then go to "Reponsive" tab and Desktop, tablet, tablet small, mobile then change padding and magrin you want as screenshot http://prntscr.com/mw3nhp

Best Regards,

PenciDesign

daimpa started the conversation

7 years ago

Conversation Start

Hello, I want to remove the padding left/right/top from all pages on mobile. Is there an option? Or custom code?