Image not having a responsive margin-bottom
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
This website I'm coding has a header with a portfolio. I want the persons "avatar" to be halfway onto the portfolio. Basically I want the avatar image to always be 50% down on to the portfolio div. The page is responsive so it shrinks accordingly.
The avatar image shrinks/resizes accordingly, however; the margin-bottom doesn't keep the same proportion. I always want it to be 50% below, onto the next div.
Here's the GIF. the start of it is how I want it, watch when I resize. Thanks.
https://imgur.com/a/nL6m9ow
here's my code
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar img {
width: 100%;
margin-bottom: -100px;
}<div class="avatar">
<img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
<img src="images/banner.png" class="banner">
</div>html css margin
edited Nov 29 '18 at 7:38
ksav
5,46621433
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
add a comment |
1
This website I'm coding has a header with a portfolio. I want the persons "avatar" to be halfway onto the portfolio. Basically I want the avatar image to always be 50% down on to the portfolio div. The page is responsive so it shrinks accordingly.
The avatar image shrinks/resizes accordingly, however; the margin-bottom doesn't keep the same proportion. I always want it to be 50% below, onto the next div.
Here's the GIF. the start of it is how I want it, watch when I resize. Thanks.
https://imgur.com/a/nL6m9ow
here's my code
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar img {
width: 100%;
margin-bottom: -100px;
}<div class="avatar">
<img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
<img src="images/banner.png" class="banner">
</div>html css margin
edited Nov 29 '18 at 7:38
ksav
5,46621433
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
@Shahnewaz hello you want the avatar to be fixed on the top border right? with 50% width?
– Abraham Sankutty
Nov 29 '18 at 4:39
Yeah, I want it to never leave that position.
– TerryJ26
Nov 29 '18 at 4:44
check my snippet or codepen to resize your window,
– Atul
Nov 29 '18 at 4:50
add a comment |
1
1
1
This website I'm coding has a header with a portfolio. I want the persons "avatar" to be halfway onto the portfolio. Basically I want the avatar image to always be 50% down on to the portfolio div. The page is responsive so it shrinks accordingly.
The avatar image shrinks/resizes accordingly, however; the margin-bottom doesn't keep the same proportion. I always want it to be 50% below, onto the next div.
Here's the GIF. the start of it is how I want it, watch when I resize. Thanks.
https://imgur.com/a/nL6m9ow
here's my code
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar img {
width: 100%;
margin-bottom: -100px;
}<div class="avatar">
<img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
<img src="images/banner.png" class="banner">
</div>html css margin
edited Nov 29 '18 at 7:38
ksav
5,46621433
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
This website I'm coding has a header with a portfolio. I want the persons "avatar" to be halfway onto the portfolio. Basically I want the avatar image to always be 50% down on to the portfolio div. The page is responsive so it shrinks accordingly.
The avatar image shrinks/resizes accordingly, however; the margin-bottom doesn't keep the same proportion. I always want it to be 50% below, onto the next div.
Here's the GIF. the start of it is how I want it, watch when I resize. Thanks.
https://imgur.com/a/nL6m9ow
here's my code
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar img {
width: 100%;
margin-bottom: -100px;
}<div class="avatar">
<img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
<img src="images/banner.png" class="banner">
</div>body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar img {
width: 100%;
margin-bottom: -100px;
}<div class="avatar">
<img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
<img src="images/banner.png" class="banner">
</div>body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar img {
width: 100%;
margin-bottom: -100px;
}<div class="avatar">
<img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
<img src="images/banner.png" class="banner">
</div>html css margin
html css margin
edited Nov 29 '18 at 7:38
ksav
5,46621433
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
edited Nov 29 '18 at 7:38
ksav
5,46621433
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
edited Nov 29 '18 at 7:38
ksav
5,46621433
edited Nov 29 '18 at 7:38
ksav
5,46621433
edited Nov 29 '18 at 7:38
ksav
5,46621433
5,46621433
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
asked Nov 29 '18 at 4:23
TerryJ26TerryJ26
283
283
@Shahnewaz hello you want the avatar to be fixed on the top border right? with 50% width?
– Abraham Sankutty
Nov 29 '18 at 4:39
Yeah, I want it to never leave that position.
– TerryJ26
Nov 29 '18 at 4:44
check my snippet or codepen to resize your window,
– Atul
Nov 29 '18 at 4:50
add a comment |
@Shahnewaz hello you want the avatar to be fixed on the top border right? with 50% width?
– Abraham Sankutty
Nov 29 '18 at 4:39
Yeah, I want it to never leave that position.
– TerryJ26
Nov 29 '18 at 4:44
check my snippet or codepen to resize your window,
– Atul
Nov 29 '18 at 4:50
@Shahnewaz hello you want the avatar to be fixed on the top border right? with 50% width?
– Abraham Sankutty
Nov 29 '18 at 4:39
@Shahnewaz hello you want the avatar to be fixed on the top border right? with 50% width?
– Abraham Sankutty
Nov 29 '18 at 4:39
Yeah, I want it to never leave that position.
– TerryJ26
Nov 29 '18 at 4:44
Yeah, I want it to never leave that position.
– TerryJ26
Nov 29 '18 at 4:44
check my snippet or codepen to resize your window,
– Atul
Nov 29 '18 at 4:50
check my snippet or codepen to resize your window,
– Atul
Nov 29 '18 at 4:50
add a comment |
2 Answers
2
active
oldest
votes
0
If you use relative units (%) for the width of your avatar, as well as the padding-top, it will grow/shrink accordingly.
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>answered Nov 29 '18 at 7:41
ksavksav
5,46621433
add a comment |
2
body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>check this code, or you can check this here also.
find the link for codepen.
https://codepen.io/atulraj89/pen/qQQBMm
Resize the window and enjoy
answered Nov 29 '18 at 4:49
AtulAtul
45913
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
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%2f53531808%2fimage-not-having-a-responsive-margin-bottom%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If you use relative units (%) for the width of your avatar, as well as the padding-top, it will grow/shrink accordingly.
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>answered Nov 29 '18 at 7:41
ksavksav
5,46621433
add a comment |
0
If you use relative units (%) for the width of your avatar, as well as the padding-top, it will grow/shrink accordingly.
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>answered Nov 29 '18 at 7:41
ksavksav
5,46621433
add a comment |
0
0
0
If you use relative units (%) for the width of your avatar, as well as the padding-top, it will grow/shrink accordingly.
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>answered Nov 29 '18 at 7:41
ksavksav
5,46621433
If you use relative units (%) for the width of your avatar, as well as the padding-top, it will grow/shrink accordingly.
body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>body {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 7.5%;
}
.avatar img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 15%;
border-radius: 50%;
border: 6px solid white;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
<img src="https://picsum.photos/1200/400" class="banner">
</div>answered Nov 29 '18 at 7:41
ksavksav
5,46621433
edited Nov 29 '18 at 8:10
answered Nov 29 '18 at 7:41
ksavksav
5,46621433
answered Nov 29 '18 at 7:41
ksavksav
5,46621433
answered Nov 29 '18 at 7:41
ksavksav
5,46621433
5,46621433
add a comment |
add a comment |
2
body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>check this code, or you can check this here also.
find the link for codepen.
https://codepen.io/atulraj89/pen/qQQBMm
Resize the window and enjoy
answered Nov 29 '18 at 4:49
AtulAtul
45913
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
add a comment |
2
body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>check this code, or you can check this here also.
find the link for codepen.
https://codepen.io/atulraj89/pen/qQQBMm
Resize the window and enjoy
answered Nov 29 '18 at 4:49
AtulAtul
45913
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
add a comment |
2
2
2
body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>check this code, or you can check this here also.
find the link for codepen.
https://codepen.io/atulraj89/pen/qQQBMm
Resize the window and enjoy
answered Nov 29 '18 at 4:49
AtulAtul
45913
body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>check this code, or you can check this here also.
find the link for codepen.
https://codepen.io/atulraj89/pen/qQQBMm
Resize the window and enjoy
body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>body{
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.avatar {
position: relative;
padding-top: 100px;
}
.avatar img{
max-width: 100px;
position:absolute;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.portfolio img {
max-width: 100%;
}<div class="avatar">
<img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
</div>
<div class="portfolio">
<img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
</div>answered Nov 29 '18 at 4:49
AtulAtul
45913
answered Nov 29 '18 at 4:49
AtulAtul
45913
answered Nov 29 '18 at 4:49
AtulAtul
45913
answered Nov 29 '18 at 4:49
AtulAtul
45913
45913
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
add a comment |
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
That works and all, however, the avatar image doesn't resize. it stays the same size, while the banner gets smaller or bigger.
– TerryJ26
Nov 29 '18 at 4:56
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
Dear I dont have a small image so I set a fixed max-width to avtar image, but if you will have a small image or image size of you need, then make avtar image max-width :100%; and see the magic, it was bound to give it a fixed with because it was a very big image. and yes one more important thing, image will only resize when it will not get the enough space around it to get fit. but if you page or device has the with more than avtar image's size then it will not resize. but anyhow if you want to resize it then use media queries.
– Atul
Nov 29 '18 at 5:06
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
If you find this helpful please mark this answer as correct
– Atul
Nov 30 '18 at 4:41
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%2f53531808%2fimage-not-having-a-responsive-margin-bottom%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
@Shahnewaz hello you want the avatar to be fixed on the top border right? with 50% width?
– Abraham Sankutty
Nov 29 '18 at 4:39
Yeah, I want it to never leave that position.
– TerryJ26
Nov 29 '18 at 4:44
check my snippet or codepen to resize your window,
– Atul
Nov 29 '18 at 4:50