[Resolved] Space on right side of page on mobile

Home Forums Support [Resolved] Space on right side of page on mobile

Home Forums Support Space on right side of page on mobile

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1532639
    Leanne

    Hi

    Please look at this page. https://byronrawlins.com/africa/

    On a desktop it looks great. But on my cellphone there is an empty space to the right of the photo gallery.

    I tried resizing the images and it makes no difference.

    What do you suggest?

    Thanks

    #1532718
    Elvin
    Staff
    Customer Support

    Hi,

    The page content seems to be causing this issue because it is exceeding beyond 100% of the viewport’s width.

    That said, try adding this CSS:

    @media (max-width:768px){
    .vc_row {
        margin-left: auto;
        margin-right: auto;
    }
    .vc_custom_1605417564595 .vc_column_container {
        padding-left: 0;
        padding-right: 0;
    }
    }
    #1532730
    Leanne

    Thank you. That solved the problem in the header and footer. But where the photo gallery (squares)… there is still a small black space to the right on my cellphone.

    Can we fix this too?

    #1532734
    Leanne

    Actually, the space is on the right and left.

    #1532737
    Elvin
    Staff
    Customer Support

    Ah yes, that’s coming from the gallery’s padding.

    try replacing this:

    @media (max-width:768px){
    .vc_row {
        margin-left: auto;
        margin-right: auto;
    }
    .vc_custom_1605417564595 .vc_column_container {
        padding-left: 0;
        padding-right: 0;
    }
    }

    with this:

    
    @media (max-width:768px){
    .vc_row {
        margin-left: auto;
        margin-right: auto;
    }
    .vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    }
    #1532744
    Leanne

    That did not work. Sorry.

    There is black space on either side of the photo gallery and I have it set to 100% width.

    #1532750
    Elvin
    Staff
    Customer Support

    There is black space on either side of the photo gallery and I have it set to 100% width.

    This part is pretty tricky because a third party plugin (Modula Gallery) with a script that moves elements around for responsiveness.

    Have you tried refreshing/resizing the page after applying the padding-left: 0 !important; & padding-right: 0 !important;? https://share.getcloudapp.com/o0um5wwJ

    #1532753
    Leanne

    Yes, I refreshed the page. The black space is still there.

    #1532758
    Elvin
    Staff
    Customer Support

    How are you adding the CSS? I can’t seem to find it being applied on the site.

    As shown here: https://share.getcloudapp.com/xQuAyXGo

    It only shows the padding applied by js_composer’s css (Visual Composer). Try removing the left and right padding from this plugin’s UI.

    vc_column-inner like other .vc_ prefixed CSS selectors are added by Visual Composer.

    Note: Modula Gallery and Visual Composer are third party plugins that are out of our scope of support. It may be best to contact their support regarding this matter.

    #1532759
    Leanne

    I will contact the plugin developer for help.

    Thanks

    #1532764
    Elvin
    Staff
    Customer Support

    No problem. 🙂

    #1532786
    Leanne

    When I use this


    @media
    (max-width:768px){
    .vc_row {
    margin-left: auto;
    margin-right: auto;
    }
    .vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    }
    }

    It works great for the rest of the page on mobile, but when I turn the phone sideways, the black space comes back all the way down the right side.

    Can we fix this?

    #1532794
    Elvin
    Staff
    Customer Support

    try adding and (orientation: [device orientation]) on your @media rule.

    /*For mobile landscape*/
    @media (max-width:768px) and (orientation: landscape){
    .vc_row {
    margin-left: auto;
    margin-right: auto;
    }
    .vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    }
    }
    /*For mobile portrait*/
    @media (max-width:768px) and (orientation: portrait){
    .vc_row {
    margin-left: auto;
    margin-right: auto;
    }
    .vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    }
    }

    This isn’t guaranteed to work as it is possible that Visual Composer and Modula Gallery use scripts that may override this or make things look weird.

    #1532809
    Leanne

    The code is there. I went to Customize… and put it in the Additional CSS field.

    The new code did not work.

    #1532822
    Elvin
    Staff
    Customer Support

    Strange.

    It may be best to check Visual Composer regarding this as the issue comes from their containers adding unwanted spaces from paddings .vc_column_container>.vc_column-inner.

    Unfortunately, as previously mentioned, third party plugins are out of the scope of our support.

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.