• Resolved kghugo2000

    (@kghugo2000)


    Dear developers,

    How can I increase the side margin in mobile version? I would like to increase the margin between the content and the screen.

    Thank you for and reading and your help.

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

Viewing 15 replies - 1 through 15 (of 17 total)
  • Hello,

    Add the below code to the Customize > Custom CSS section and check it works or not.

    @media only screen and (max-width: 767px) {
    .separate-layout .container {
        max-width: 80%;
    }
    }
    Thread Starter kghugo2000

    (@kghugo2000)

    It is working perfectly! Thank you so much!

    You’re welcome!

    Hi,

    I have a similar question — I’m trying to get RID of the side margins on mobile and tablet.

    I’m using OceanWP with elementor, and OceanWP is adding padding/margins that I don’t need.

    Thanks!
    Mark

    @markdigidigi can you please share your site link so that I can check it?

    Hi, here’s a page for example: https://rojavs.dreamhosters.com/awards-grants/hellen-potter-award/

    As I narrow the window, when I get to about 945px, the theme suddenly adds a bunch of padding. In elementor I have all the sections set to have only 20px of padding. It looks correct in the second screenshot; the first shows the extra padding.

    924px window — https://ibb.co/pLYyLHc

    1006px window — https://screenshot.net/mr5o2sp

    Thanks!
    Mark

    Sorry, but I didn’t see the padding. Can you please mark the padding issue on your screenshot?

    Hi Amit,

    Sorry, I see those are unclear on the white background..

    Here’s a video. You can see how when I narrow the window below about 945px, it suddenly “jumps” and oceanwp adds more padding.

    https://drive.google.com/file/d/14RL046g-uIm50ojVcr957Pz420f8cDs7/view?usp=sharing

    Later in the video I narrowed it all the way to mobile version, and you can see it’s also adding that padding in mobile (in elementor I set it to only have 20px padding).

    Also, I noticed on non-Elementor pages, the issue doesn’t happen (but again, on Elementor pages, it only happens when OceanWP is activated).
    For example you can open this page which isn’t elementor, and try narrowing the window like I did in the video. Watch the menu bar at the top and you’ll see it never gets that extra padding from OceanWP — https://rojavs.dreamhosters.com/events/assa-annual-meeting/

    If you would like WP admin access let me know where I can privately email that to you.

    Thanks for your help!
    Mark

    @apprimit

    Hi Amit,

    Any update on this?

    Thank you!
    Mark

    @apprimit

    Okay I made a discovery — the issue happens when I have sections set to boxed width and leave the setting blank (default). OceanWP seems to be adding a narrower default boxed width in tablet and mobile.

    If I put 1140px in (that’s what the Elementor default boxed width is set as..) then I don’t have problems in mobile and tablet.

    However, I now have to go through over 40 pages on my site and change the boxed width on every single section… unless I can figure out how to get OceanWP to not do this. Any thoughts?

    Thanks!
    Mark

    Actually scratch that. That made it appear correctly in the Elementor editor, but on the front end, OceanWP is still adding padding in mobile and tablet.

    Your site is in under construction mode. Can you please disable it so that I can check it?

    Sorry. Actually can you check it here — https://ase-dev.digidigi.pro

    And let me know if you want me to email you login info.

    It happens due to Elementor settings. On the desktop view, Elementor container use max-width: 1140px –

    .elementor-section.elementor-section-boxed>.elementor-container {
        max-width: 1140px;
    }

    But on mobile and tablet, it uses max-width:90% –

    @media only screen and (max-width: 959px){
    .container, body.content-full-screen .elementor-section-wrap>.elementor-section.elementor-section-boxed>.elementor-container {
        max-width: 90%;
    }}

    I don’t think it is a theme related issue because you have designed your page using Elementor and there is no oceanwp css to control the page width.

    It is not allowed to share email id, login info, etc. It is against the forum guidelines. Hope you understand it.

    Hi Amit, thanks for getting back.

    I’ve tried changing themes and with every other theme it shows correctly, but when I activate OceanWP I get that padding.

    See these images-

    OceanWP – https://www.dropbox.com/s/k5zo3wwy72gld44/IMG_7465.PNG?dl=0
    Every other theme – https://www.dropbox.com/s/c4y1tw7rng58dnc/IMG_7464.PNG?dl=0

    Any thoughts?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘How to increase the side margin in mobile’ is closed to new replies.