Text is running on the edge of screen

  • I am on the OceanWP theme and using Elementor-free. Because I’m on Elementor free, I can’t create a single-post template so I’m using Gutenberg for single posts. My problem is the content of my blog is right at the edge of the screen (extreme leftside) on desktop and on mobile, it’s like there is no padding at all/margins. I have gone through all related forums where other users faced the same issue, most had a similar issue solved by custom CSS codes but nothing has worked for me, please, help.

    The link posted leads to a screenshot of another user who has had the exact problem I’m facing, they had the AMP plugin, which I don’t have, so the CSS didnt work for me. Any help will be appreciated.

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

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello,

    Please share the page URL where you facing this issue to check it.

    Thread Starter tangolima

    (@tangolima)

    Thanks for responding Abhishek, I forgot to mention my page is still in “Coming Soon” mode, so I’m not sure if it will be visible from your end? Maybe this might help, mentioning some things I’ve tried so far, i) Deactivating ALL plugins ii) Adjusting the OceanWP setting at Customize>Blog>Single Post> Full-Width Content to a value of “Zero” iii) Various CSS codes on this forum iv) I also reset my WordPress site yesterday, just in case it was a bug.

    Sorry to make it hard for you without visual reference…

    Hello,

    It is not a bug it is coming from some settings but without seeing the issue unable to say anything, try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    `@media only screen and (max-width: 959px){
    .container{
    max-width: 90%;
    }
    }`

    Thread Starter tangolima

    (@tangolima)

    Hi,

    I apologise for the delayed responses.

    I tried the CSS but didn’t quite respond until added margin-left: 15px, margin-top 15px, and also the phrase “!important” the text then shifted from edge of screen which is something I’m hoping to achieve. (Though I could use a professionally written CSS because my improvised one will do more harm than good). Since I’m not really experienced with this, I also opened “Inspector” to see if there was a code matching the CSS you provided me – which could be causing all this, and this is what I found:

    </style>
    <style type="text/css" media="screen">
    html {
        margin-top: 32px !important;
    }

    * html body {
        margin-top: 32px !important;
    }

    @media screen and (max-width: 782px) {
        html {
            margin-top: 46px !important;
        }

        * html body {
            margin-top: 46px !important;
        }
    }
    </style>

    If that’s the correct part I captured, then there is NO margin-left, margin-right nor margin-bottom, to control my posted content, hence running on edge of screen. I hope this helps…

    Thread Starter tangolima

    (@tangolima)

    UPDATE: So after more hours of trial and error adjusting, this is what seems to be working on Tablet & Mobile Mode, though the problem is still there on Desktop view. I realised I was confusing margin with padding!

    I still need help in properly writing that CSS – the right way, and the padding to respond on the desktop mode.

    @media only screen and (max-width: 1280px) {

    html
    #main
    {
    padding-right: 20px;
    padding-left:20px
    }

    • This reply was modified 3 years, 8 months ago by tangolima.
    • This reply was modified 3 years, 8 months ago by tangolima.

    Sorry but if you could share the URL, I can inspect it and able to give you the solution accordingly.

    Or try the below code if it works.

    #main #content-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Text is running on the edge of screen’ is closed to new replies.

Tags