Issue
I'm currently working on a react project and am having an issue where when I am trying to add padding to some images at the bottom of my page in a a separate css class it's moving the main image at the top of my page.
First image
<div className="self--image">
<img src={Me} alt="Me"/>
</div>
New Images
<div className="bottom--cont">
<a href="https://github.com/mm2023git">
<img src={github} alt="Github"/>
</a>
<a href="https://www.instagram.com/mokelmoo/">
<img src={insta} alt = "Instagram"/>
</a>
</div>
css
.self--image > img{
width: 317px;
}
.bottom--cont{
background-color: #161619;
position: relative;
top: -47px;
}
.bottom--cont > a, img{
width: 25px;
display: inline-block;
position: relative;
padding-left: 20px;
}
How can I adjust this so when I add padding or positioning to the other images it doesn't affect my main image?
Solution
Basically the error was in .bottom--cont > a, img
, here you are saying to add style to .bottom--cont
class and then add style to all img
tag,
you need to separate the selectors like this
.bottom--cont > img, .bottom--cont > a
.self--image > img {
width: 317px;
}
.bottom--cont {
background-color: #161619;
position: relative;
top: -47px;
}
.bottom--cont > img, .bottom--cont > a {
width: 25px;
display: inline-block;
position: relative;
padding-left: 60px;
}
<div class="self--image">
<img src="https://picsum.photos/id/3/400/400" alt="Me" />
</div>
<div class="bottom--cont">
<a href="https://github.com/mm2023git">
<img src="https://picsum.photos/id/1/50/50" alt="Github" />
</a>
<a href="https://www.instagram.com/mokelmoo/">
<img src="https://picsum.photos/id/1/50/50" alt="Instagram" />
</a>
</div>
Answered By - Niloy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.