How to stretch a section?

  • XLFR

    (@xlfr)


    6 years, 4 months ago

    Hey,
    Let me start of by saying that even though I used a specific plugin (Elementor) to create the landing page, the question is universal and CSS related; *NOT* plugin related.

    So, as you can see the sections are boxed, and I need to figure out a way to stretch them using CSS to the fit the page. I want it to fit in the white area of the page, not to stretch on the entire screen.

    Thank you to any person who will help me with it!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • Kim White

    (@kimwhite)

    6 years, 4 months ago

    If I’m understanding you.. you don’t like the “padding” around the areas…
    There are 2 styles controling this…

    .layout-content.boxed #primary – you have a padding of 25% on all 4 sides…
    another is
    .container {
    padding-right: 15px;
    padding-left: 15px;}

    Ya’ll want to override these or edit your style sheet.
    It all depends on what you’re comfortable with.

    Thread Starter XLFR

    (@xlfr)

    6 years, 4 months ago

    Hey Kim,
    Yeah, I want to eliminate the white padding around the sections.

    Tried this:

    .container {
padding-right: 0px;
padding-left: 0px;}

    And this:

    .layout-content.boxed #primary {
padding-right: 0px;
padding-left: 0px;}

    And they both leave – although indeed smaller – some padding.
    Is there anything else you would suggest?

    Thread Starter XLFR

    (@xlfr)

    6 years, 4 months ago

    @kimwhite
    Kim I need you!

    Kim White

    (@kimwhite)

    6 years, 4 months ago

    I see the one is in a media query, did you change that?

    @media (min-width: 768px)
    style.min.css:2
    .layout-content.boxed #primary {
    padding: 25px;
    }

    Kim White

    (@kimwhite)

    6 years, 4 months ago

    see here…
    https://www.dropbox.com/s/v7g8fh72p46ufa8/Screenshot%202017-12-27%2008.28.47.png?dl=0

    Thread Starter XLFR

    (@xlfr)

    6 years, 4 months ago

    I didn’t put it in media query if that’s what you’re asking.

    Thread Starter XLFR

    (@xlfr)

    6 years, 4 months ago

    @kimwhite
    I didn’t put it in media query if that’s what you’re asking.

    Kim White

    (@kimwhite)

    6 years, 4 months ago

    Are you good on this? If you change both in the right places it works.
    I was able to do this in my inspector.

    Thread Starter XLFR

    (@xlfr)

    6 years, 3 months ago

    @kimwhite
    Yesterday I sat on this [Expletive moderated] thing for a couple of hours. At some point I got so pissed that I launched my wireless mouse into the floor. It [Expletive moderated] exploded.

    I really don’t understand why it’s happening, here’s the CSS code I used:
    https://snag.gy/5ixKNb.jpg

    And for some reason it’s overridden with this:
    https://snag.gy/pGSDq5.jpg

    When I alter the 25px in the inspector it works, just like it does for you… but why the hell it overrides the CSS I entered?

    Kim White

    (@kimwhite)

    6 years, 3 months ago

    write a media query with the override, then try it with important.
    Though it seems your custom style sheet should be loaded last, but the minified one is.

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

    Kim White

    (@kimwhite)

    6 years, 3 months ago

    Hi @xlfr, I understand your frustrations, I just have to ask to try to keep it family-friendly on the forums.

    Thread Starter XLFR

    (@xlfr)

    6 years, 3 months ago

    @kimwhite
    Finally! Progress! Ok, it works.
    Now I have something new that needs fixing.

    By using this code:

    .container {
padding-right: 0px;
padding-left: 0px;}

    It stretches not only the page content but the menu as well. This results in a menu that creates left-right scroll bar in mobile/tablet view.

    What can I do to resolve this?
    If I delete this code it leaves margin on the sides.
    This is the page I’m talking about: https://roi.pub/about-me

    THANKS KIM!!!

    Kim White

    (@kimwhite)

    6 years, 3 months ago

    You may need to isolate the container for the areas you need…
    That’s the beauty of CSS.

    .container is a class being used in various places…

    you may need to do…
    #content .container{bla bla}

    Kim

    Thread Starter XLFR

    (@xlfr)

    6 years, 3 months ago

    PROGRESS IS BEING MADE!
    Now the menu stays normal but it stretches the content of the page with a bottom scroll bar.

    I tried to understand the logic behind “#content. container” but couldn’t.
    To apply a class in my code (#content for example) it has to come before the element when I check in the source (.container for example) ?

    What should I do in this case?

    Kim White

    (@kimwhite)

    6 years, 3 months ago

    I’m sorry, I did not look closely at the about page.
    Are you using a page builder? there is something else at play on this one.
    Looking at the photo there are some other classes adding the padding…

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • The topic ‘How to stretch a section?’ is closed to new replies.