I have a div with some text inside my div parent container and a second div with a animated logo. I want to place the first div (the one with the text inside) at the start of the page (which i have achieved without any problems) and the second div with the logo inside at the end of the page (always horizontally of course). I can't align correctly the second div and because of their size (700px) it takes extra width and goes outside of the page.
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
margin: 0;
min-height: 100% !important;
background: linear-gradient(30deg, #000000, #053254);
}
.programmer-logo {
height: 700px;
animation: logo-anim infinite 1s alternate-reverse;
}
.programmer-logo-container {
display: flex;
}
.programmer-logo-div {
color: white;
position: absolute;
top: 50%;
transform: translate(100%, -50%);
}
.title {
text-align: start;
margin-left: 3%;
color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.name-title {
font-size: 55px;
}
.hello-title {
font-size: 50px;
}
.desc-title {
font-size: 30px;
margin-top: 5px;
color: darkgray;
}
.App {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100% !important;
}
.App-header {
min-height: 100%;
height: 100%;
height: max-content;
}
@keyframes logo-anim {
from {
transform: translateY(0px);
}
to {
transform: translateY(20px);
}
}<div className="App">
<div className='content-container'>
<div className='title'>
<p className='hello-title'>Hello, i'm </p>
<h1 className='name-title'>George Sepetadelhs</h1>
<p className='desc-title'>Mobile and game developer</p>
</div>
<div className='programmer-logo-container'>
<div className='programmer-logo-div'>
<img className='programmer-logo' src={programmer_icon} />
</div>
</div>
</div>
</div>I think you should use container for this one. Also consider set a size limit and some break points for more responsive site
I figured your problem in the use CSS position. I made changes to your CSS code:
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
margin: 0;
min-height: 100% !important;
background: linear-gradient(30deg, #000000 ,#053254);
}
.programmer-logo {
height: 700px;
animation: logo-anim infinite 1s alternate-reverse;
}
/*.programmer-logo-container {
display: flex;
}*/
.content-container{
width: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.programmer-logo-div {
color: white;
/*position: absolute;*/
/*top: 50%;*/
/*transform: translate(100%, -50%);*/
}
.title {
text-align: start;
margin-left: 3%;
color: white;
/*position: absolute;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.name-title {
font-size: 55px;
}
.hello-title {
font-size: 50px;
}
.desc-title {
font-size: 30px;
margin-top: 5px;
color: darkgray;
}
/*.App {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100% !important;
}*/
.App-header {
min-height: 100%;
height: 100%;
height: max-content;
}
@keyframes logo-anim {
from {
transform: translateY(0px);
}
to {
transform: translateY(20px);
}
}Hopefully this helps