How to make bootstrap containers work in gutenburg alignfull
I've made a gutenburg .alignfull class
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
Which works nicely.
I've put a bootstrap container in...
<div class="alignfull green-bg">
<div class="container">
Hello
</div>
</div>
Which works fine in keeping the content in the grid. However it stops working when I view on smaller screens.
The padding and margin, which would usually bounce off the edge of the browser, go off the page.
So my content is right up against the wall, instead of padded like a good bootstrap container should be.
Does anyone know a fix for this?
I've tried different CSS
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
And I am considering a media query to override the alignfull on smaller screens. I just felt there should be a css way to do it that still supported .container.
Thanks
css bootstrap-4 wordpress-gutenberg gutenberg-blocks
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
add a comment |
I've made a gutenburg .alignfull class
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
Which works nicely.
I've put a bootstrap container in...
<div class="alignfull green-bg">
<div class="container">
Hello
</div>
</div>
Which works fine in keeping the content in the grid. However it stops working when I view on smaller screens.
The padding and margin, which would usually bounce off the edge of the browser, go off the page.
So my content is right up against the wall, instead of padded like a good bootstrap container should be.
Does anyone know a fix for this?
I've tried different CSS
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
And I am considering a media query to override the alignfull on smaller screens. I just felt there should be a css way to do it that still supported .container.
Thanks
css bootstrap-4 wordpress-gutenberg gutenberg-blocks
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
add a comment |
I've made a gutenburg .alignfull class
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
Which works nicely.
I've put a bootstrap container in...
<div class="alignfull green-bg">
<div class="container">
Hello
</div>
</div>
Which works fine in keeping the content in the grid. However it stops working when I view on smaller screens.
The padding and margin, which would usually bounce off the edge of the browser, go off the page.
So my content is right up against the wall, instead of padded like a good bootstrap container should be.
Does anyone know a fix for this?
I've tried different CSS
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
And I am considering a media query to override the alignfull on smaller screens. I just felt there should be a css way to do it that still supported .container.
Thanks
css bootstrap-4 wordpress-gutenberg gutenberg-blocks
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
I've made a gutenburg .alignfull class
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
Which works nicely.
I've put a bootstrap container in...
<div class="alignfull green-bg">
<div class="container">
Hello
</div>
</div>
Which works fine in keeping the content in the grid. However it stops working when I view on smaller screens.
The padding and margin, which would usually bounce off the edge of the browser, go off the page.
So my content is right up against the wall, instead of padded like a good bootstrap container should be.
Does anyone know a fix for this?
I've tried different CSS
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
And I am considering a media query to override the alignfull on smaller screens. I just felt there should be a css way to do it that still supported .container.
Thanks
css bootstrap-4 wordpress-gutenberg gutenberg-blocks
css bootstrap-4 wordpress-gutenberg gutenberg-blocks
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
asked Nov 20 '18 at 15:25
arthurrandomarthurrandom
262
262
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Why don't you try change your alignfull css classes so that they only apply on larger screens like so:
@media all and (min-width: 768px) {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
Make sure to adjust the breakpoint (768px) to suit your project.
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }
– arthurrandom
Nov 21 '18 at 13:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396248%2fhow-to-make-bootstrap-containers-work-in-gutenburg-alignfull%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Why don't you try change your alignfull css classes so that they only apply on larger screens like so:
@media all and (min-width: 768px) {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
Make sure to adjust the breakpoint (768px) to suit your project.
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }
– arthurrandom
Nov 21 '18 at 13:11
add a comment |
Why don't you try change your alignfull css classes so that they only apply on larger screens like so:
@media all and (min-width: 768px) {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
Make sure to adjust the breakpoint (768px) to suit your project.
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }
– arthurrandom
Nov 21 '18 at 13:11
add a comment |
Why don't you try change your alignfull css classes so that they only apply on larger screens like so:
@media all and (min-width: 768px) {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
Make sure to adjust the breakpoint (768px) to suit your project.
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
Why don't you try change your alignfull css classes so that they only apply on larger screens like so:
@media all and (min-width: 768px) {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
Make sure to adjust the breakpoint (768px) to suit your project.
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
answered Nov 21 '18 at 4:58
rhysclayrhysclay
742521
742521
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }
– arthurrandom
Nov 21 '18 at 13:11
add a comment |
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }
– arthurrandom
Nov 21 '18 at 13:11
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added
@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }– arthurrandom
Nov 21 '18 at 13:11
Thanks that works :) Just to add, in my case the div didn't stretch to the edge because it is also in another .container. To get around this i added
@media all and (max-width: 768px) { margin-left: -15px; margin-right: -15px; }– arthurrandom
Nov 21 '18 at 13:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396248%2fhow-to-make-bootstrap-containers-work-in-gutenburg-alignfull%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
