• Hi, in the past couple of days I’ve been trying to stretch a certain section to fill the entire container, and I got it working. Problem is, in mobile/tablet a left-right scroll bar appears and it also messes up the sticky header.

    Page that I stretched: https://roi.pub/about-me/
    Code I used:

    #primary .container {
    padding-right: 0px;
    padding-left: 0px;}
    
    .layout-content.boxed #primary {
    padding: 0px;
    }
    
    @media only screen and (min-width: 768px) {
    .layout-content.boxed #primary{padding: 0 !important;}
    }

    And here’s what a page looks like prior to stretching: https://roi.pub/elementor-2620/ I’m just trying to get the content to fill the white container without messing things up.

    Advice will be appreciated.

    • This topic was modified 7 years, 2 months ago by XLFR.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @xlfr,
    you can try adding a .row rule to the mobile CSS

    New

    .row {
    	margin-right: 0;
    	margin-left: -15px;
    }

    Hi @xlfr

    Sorry for asking you something rot related to your question,

    Which software that you were using to build your website?

    Thread Starter XLFR

    (@xlfr)

    Thanks @alichani
    I tried your addition and it did remove the scrollbar, but left me with a white margin…
    Take a look here: https://snag.gy/L8EmcK.jpg

    Got anything else in your sleeve?

    @hon1145
    No problem, it’s Elementor page builder.

    Hi, you could try this adding to your custom css:

    @media ( max-width: 768px ) {
       #content.row { margin: 0; }
    }
    Thread Starter XLFR

    (@xlfr)

    @geoclaps

    Hey man, thanks for this, the scrollbar is gone but here’s what it looks like : https://snag.gy/MvVFmp.jpg

    Any margin other the 0 with this string of code eliminates the white space but brings the scrollbar back…

    Any other ideas?

    Update my previous piece off css with the following, wich should work.

    @media ( max-width: 768px ) {
       #content.row { margin: 0; }
       article .elementor-section-full_width { margin-left: -15px; margin-right: -15px }
    }
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Need Help With CSS…’ is closed to new replies.