Okay
  Public Ticket #1744951
Mobile Padding
Closed

Comments

  •  2
    Riall started the conversation

    Hello,

    I am developing our new website in V9.0. I am having issues with Full Width Content rows being kicked out of position when testing on mobile.  I was able to adjust the overall padding for mobile by using this CSS:

    /* Padding on Mobile */ @media only screen and (max-width: 480px) {     body .container {         max-width: 80% !important;     } }

    Unfortunately, Full Width Content rows seem to ignore this code. Is there a code snippet that would work for rows with Full Width Content? I've attached an image that shows Full Width Background rows below and above a Full Width Content row.

    Thanks,

    Riall

  •  8,998
    Tahir replied

    Hey Again,

    Try using it. 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (min-width: 480px) {
        .container, body[data-header-format="left-header"] .container, .woocommerce-tabs .full-width-content .tab-container, .nectar-recent-posts-slider .flickity-page-dots, .post-area.standard-minimal.full-width-content article.post .inner-wrap, .material #search-outer #search {
            max-width: 320px !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  2
    Riall replied

    Hi Tahir,

    Thanks for the quick response!

    The CSS snippet works perfectly now at 375x667. But, when I resized the screen to tablet size, all the content stays at mobile size. Am I missing something? Please see attached.


    Thanks,

    Riall

  •  8,998
    Tahir replied

    My bad we need to use max-width not min-width . 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 480px) {
        .container, body[data-header-format="left-header"] .container, .woocommerce-tabs .full-width-content .tab-container, .nectar-recent-posts-slider .flickity-page-dots, .post-area.standard-minimal.full-width-content article.post .inner-wrap, .material #search-outer #search {
            max-width: 320px !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  2
    Riall replied

    Tahir, that fixed things! Everything is super clean and responsive now and properly aligned.

    I did notice that the Full Width Content rows (some have inner rows, some don't) extend beyond the 320 px max-width. See attached. The row with the light green background is wider than the row above it.

    Is there anyway to keep Full Width Content rows to 320 px max-width as well?

    Thank you for all your help!

    Riall

  •  2
    Riall replied

    Hi Again,

    I just noticed the footer is out of position. See attached. Can you send me the code snippet for the footer to add to the previous CSS you sent me?

    Thanks,

    Riall

  •  8,998
    Tahir replied

    Hey Again, Hope you had a Great Weekend, 

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks


    ThemeNectar Support Team