Mixing
Right margin not showing with horizontal scroll
0
In my mobile view, I have a horizontal scroll that holds three divs (like cards). The horizontal scroll works perfectly, however, the last div's right margin is not showing. It should show 6px. All three divs have margin-left: 6px and margin-right: 6px;
Here's the left margin showing correctly:
Here's the right margin not showing at all:
@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>html5 css3 bootstrap-4 margin
asked Nov 20 '18 at 14:03
PaulaPaula
1079
add a comment |
0
In my mobile view, I have a horizontal scroll that holds three divs (like cards). The horizontal scroll works perfectly, however, the last div's right margin is not showing. It should show 6px. All three divs have margin-left: 6px and margin-right: 6px;
Here's the left margin showing correctly:
Here's the right margin not showing at all:
@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>html5 css3 bootstrap-4 margin
asked Nov 20 '18 at 14:03
PaulaPaula
1079
add a comment |
0
0
0
In my mobile view, I have a horizontal scroll that holds three divs (like cards). The horizontal scroll works perfectly, however, the last div's right margin is not showing. It should show 6px. All three divs have margin-left: 6px and margin-right: 6px;
Here's the left margin showing correctly:
Here's the right margin not showing at all:
@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>html5 css3 bootstrap-4 margin
asked Nov 20 '18 at 14:03
PaulaPaula
1079
In my mobile view, I have a horizontal scroll that holds three divs (like cards). The horizontal scroll works perfectly, however, the last div's right margin is not showing. It should show 6px. All three divs have margin-left: 6px and margin-right: 6px;
Here's the left margin showing correctly:
Here's the right margin not showing at all:
@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>html5 css3 bootstrap-4 margin
html5 css3 bootstrap-4 margin
asked Nov 20 '18 at 14:03
PaulaPaula
1079
asked Nov 20 '18 at 14:03
PaulaPaula
1079
asked Nov 20 '18 at 14:03
PaulaPaula
1079
asked Nov 20 '18 at 14:03
PaulaPaula
1079
asked Nov 20 '18 at 14:03
PaulaPaula
1079
1079
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
This post solved my problem. I basically added a content to my last div.
Last margin / padding collapsing in flexbox / grid layout
answered Nov 20 '18 at 21:52
PaulaPaula
1079
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
});
}
});
draft saved
draft discarded
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%2f53394739%2fright-margin-not-showing-with-horizontal-scroll%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
0
This post solved my problem. I basically added a content to my last div.
Last margin / padding collapsing in flexbox / grid layout
answered Nov 20 '18 at 21:52
PaulaPaula
1079
add a comment |
0
This post solved my problem. I basically added a content to my last div.
Last margin / padding collapsing in flexbox / grid layout
answered Nov 20 '18 at 21:52
PaulaPaula
1079
add a comment |
0
0
0
This post solved my problem. I basically added a content to my last div.
Last margin / padding collapsing in flexbox / grid layout
answered Nov 20 '18 at 21:52
PaulaPaula
1079
This post solved my problem. I basically added a content to my last div.
Last margin / padding collapsing in flexbox / grid layout
answered Nov 20 '18 at 21:52
PaulaPaula
1079
answered Nov 20 '18 at 21:52
PaulaPaula
1079
answered Nov 20 '18 at 21:52
PaulaPaula
1079
answered Nov 20 '18 at 21:52
PaulaPaula
1079
1079
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53394739%2fright-margin-not-showing-with-horizontal-scroll%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
