• Resolved jlanpheer

    (@jlanpheer)


    I’m using the Astra theme but am writing my own plugin to do a contact form the way i’d like it to look. I have a ‘wrapper’ div that i’d simply like it to cover the entire width of the page. Unfortunately, there always seems to be some sort of hidden margin on the left and right that constrains the div from covering 100% of the screen. I’m new to the Astra theme, but not to CSS, and when i use developer tools to inspect the div, i don’t find anything that would suggest a margin set of any type. Indeed, in my css, i set the margin and padding to 0 and that seems to have no effect(?). Even specifying ‘!important’ has no effect. If i DO set a margin (say ‘2rem’ all the way around), that DOES have the desired effect, but on top of the margin that is already visible. So, i’m baffled and wondering if there’s a setting either in the Astra theme itself or maybe even in WordPress that anyone can suggest that i could examine as a way to control this behavior? Here’s my CSS for the div:

    body {
        margin: 0px!important;
        background-color:lightblue;
        padding: 0!important;
        text-align:center;
        border: 10px blue solid;
    }
    
    .wrapper {
        display: inline-block;
        width:100%; //max-width has no effect, using 100vw still uses the left margin and pushes the rest of the div off the screen to the right.
        height:100%; 
        background-color:#BFF4FF;
        margin: 0!important;  //!important has no effect.
        padding: 0!important; //important has no effect.
        border: 10px red solid;
    }

    p.s. If i remove the wrapper entirely and simply place the form on the body, the problem continues to exist and the margin is even larger. If anybody has a suggestion of something to look at, i’m all ears. I’m baffled by this one. Thanks for looking, cheers!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @jlanpheer,

    What if you change the Content Layout to Full Width / Contained or Full Width / Stretched. Maybe from Astra Meta Settings.

    Let us know how you go.

    Kind regards,
    Herman ??

    Thread Starter jlanpheer

    (@jlanpheer)

    Thanks for the suggestion Herman, i will check out your suggestion and get back to you. I am truly baffled by this one, all the settings in dev tools indicate margin:0 and padding:0, and i’m on the verge of pulling out my remaining hair! :-). Thank you, i’ll update once i get a chance to find and implement your suggestion.

    Thread Starter jlanpheer

    (@jlanpheer)

    OK, so i’ve circled back on this and i was still positively flummoxed for awhile, but believe i’ve zeroed in on the problem. I tried all of Herman’s suggestions above (i actually had those settings already) but eventually uncovered the fact that the behavior that i am trying to track down traces to a Gutenberg block setting where the element ‘wp-block-uagb-container’ has a default padding value of 10px. I’ve not yet been able to change that behavior with custom css, but i’ll need to ask that question on the Gutenberg Blocks forum, this is not an Astra configuration issue. If i learn differently in the future, i will open another issue. This one can be closed. Thank you for the suggestions Herman!

    Thread Starter jlanpheer

    (@jlanpheer)

    Had to type something to close this….

    Hi @jlanpheer,

    Very pleased to know that you have figured it out! Our Spectra team should help you out on Spectra forum.

    Feel free to start a new thread if there is anything else related to Astra we can help you with.

    Kind regards,
    Herman ??

    Thread Starter jlanpheer

    (@jlanpheer)

    Thank you Herman, yes i hope so. I originally posted in the Gutenberg Blocks forum, which was the wrong place and i’ve since opened up a thread on the Spectra forum and hope to hear something soon so i can finish this project up!

    Thank you for your followup, i truly appreciate it!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Wrapper div doesn’t cover 100% of the viewport width’ is closed to new replies.