How do I keep aspect ratio with padding for a card image on mobile display?
1
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
css bootstrap-4
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
add a comment |
1
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
css bootstrap-4
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
How are you adding the padding? Can you put that in your code?
– rpivovar
Dec 29 '18 at 2:44
It is using bootstrap class "p-5" on the img, but the same result if I add it with my own class.
– asdfractal
Dec 30 '18 at 18:53
add a comment |
1
1
1
0
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
css bootstrap-4
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>css bootstrap-4
css bootstrap-4
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
edited Dec 29 '18 at 7:48
Akber Iqbal
2,0433822
2,0433822
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
asked Dec 29 '18 at 2:40
asdfractalasdfractal
61
61
How are you adding the padding? Can you put that in your code?
– rpivovar
Dec 29 '18 at 2:44
It is using bootstrap class "p-5" on the img, but the same result if I add it with my own class.
– asdfractal
Dec 30 '18 at 18:53
add a comment |
How are you adding the padding? Can you put that in your code?
– rpivovar
Dec 29 '18 at 2:44
It is using bootstrap class "p-5" on the img, but the same result if I add it with my own class.
– asdfractal
Dec 30 '18 at 18:53
How are you adding the padding? Can you put that in your code?
– rpivovar
Dec 29 '18 at 2:44
How are you adding the padding? Can you put that in your code?
– rpivovar
Dec 29 '18 at 2:44
It is using bootstrap class "p-5" on the img, but the same result if I add it with my own class.
– asdfractal
Dec 30 '18 at 18:53
It is using bootstrap class "p-5" on the img, but the same result if I add it with my own class.
– asdfractal
Dec 30 '18 at 18:53
add a comment |
1 Answer
1
active
oldest
votes
0
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
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%2f53966254%2fhow-do-i-keep-aspect-ratio-with-padding-for-a-card-image-on-mobile-display%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
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
add a comment |
0
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
add a comment |
0
0
0
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>.card { display:block !important; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</div>answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
answered Dec 29 '18 at 3:01
Akber IqbalAkber Iqbal
2,0433822
2,0433822
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
add a comment |
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
Yes that worked, thank you. Are you able to explain why it happened on dev tool on my machine, but through codepen it wasn't? I'm very new to web development so it might be obvious but I'm unable to see why.
– asdfractal
Dec 30 '18 at 18:56
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
When designing and changing CSS properties, it is a must to do a hard refresh Ctrl+R or Ctrl+F5 of your browser after every change... Chrome/Firefox rely of cache to serve pages faster and changes are left behind; you can do inspector element(F12) to see the exact state of a file on your machine.
– Akber Iqbal
Dec 31 '18 at 1:04
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
I'd appreciate if you mark this answer as accepted, Thanks
– Akber Iqbal
Dec 31 '18 at 1:49
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%2f53966254%2fhow-do-i-keep-aspect-ratio-with-padding-for-a-card-image-on-mobile-display%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
How are you adding the padding? Can you put that in your code?
– rpivovar
Dec 29 '18 at 2:44
It is using bootstrap class "p-5" on the img, but the same result if I add it with my own class.
– asdfractal
Dec 30 '18 at 18:53