• Hi guys,

    I followed some support a while back about how to make my page fullwidth, but it still isn’t displaying properly.

    If you view my desktop site (drumlessonsinbristol.com) you’ll see a small amount of padding around the background color that I’ve set on every other section of text (beginning under heading ‘Welcome to drum lessons in Bristol dot com’).

    I can live with this on the desktop version, but if you access my site on mobile you’ll see that it looks terrible, with my text right up against the edge of this little box that’s created.

    Any help will be greatly appreciated!

    Danny

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hey,
    so first I think I would suggest you use pagebuilder you can add fullwidth rows without having to make the whole layout fullwidth like this and need a more css to make it work since your wanting backgrounds to be fullwidth but the content to not be on the edit. (your not adding padding on the div with your background? so that is what happens).

    Either way I’ve come up with some css that should do what you want.

    .rowtight, .row {
        margin: 0;
    }
    body.home #content .main, .container {
        padding: 0;
        overflow-x: hidden;
    }
    @media (max-width: 768px){
    p,h1, h2, h3, h4, h5 {
        max-width: 90%;
    }
    }

    Kadence Themes

    Thread Starter dancoxdrums

    (@dancoxdrums)

    Uh-oh… Everything looked good with this until I tried hovering over my menu and nothing dropped down!

    Thank you so much for the original assistance but I wonder if this can be solved as well?

    This appears to have to do with the overflow-x property in the above CSS.

    You should be able to remove the “overflow-x: hidden;” part of the CSS until the Theme Developer sees this and provides another solution.

    This will just be a temporary solution so that your menu is visible until a better solution is presented.

    .headerclass > .container {
        overflow-x: visible;
    }

    Add that.

    Kadence Themes

    Thread Starter dancoxdrums

    (@dancoxdrums)

    Thank you! All good. Can I tip you guys via PayPal or something? This is great support for a free theme.

    Thread Starter dancoxdrums

    (@dancoxdrums)

    Okay, looks like we’re still not quite done here… I definitely owe you guys a beer…

    The homepage is perfect but the fix isn’t applying site-wide. If you check out–
    https://drumlessonsinbristol.com/drumlessonsinweston/

    You’ll see that there’s still the small padding that was the original issue.

    Many thanks again,
    Danny

    body.page #content .main .pageclass {
        padding: 0;
    }

    add that ^

    When you want to add spacing to a page it’s best to use the space shortcode (part of the theme shortcode options) vs adding empty spaces through the wordpress editor.

    Kadence Themes

    Thread Starter dancoxdrums

    (@dancoxdrums)

    Great, thanks again, and also for the tip about shortcode– I figured out fairly early on that I’m better off in the text editor than visual… WordPress seems to like to sneak changes in without you noticing if you use visual!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Page still not true fullwidth’ is closed to new replies.