Hej
mam takie problem, że przy zmniejszeniu szerokości divów, (media queris dla telefonu), dwa divy ustawione pod sobą nachodzą na siebie. Ustawiłam dla obydwu sekcji height 100%, ale domyslam się że nie % są tylko dla dzieci, a rodzice powinni mieć na sztywno w px.. W normalnym widoku dla desktop jest ok, problem zaczyna się gdy ustawię widok dla telefonu. Próbowałam już kilku różnych sposobów i zawsze text sie rozjeżdża. Może ktoś coś doradzi. :)
<section>
<div class="container about">
<div class="about_title">
<h1>about me</h1>
</div>
<div class="about_all_sectiones">
<section class="about_section_one">
<div class="about_picture">
</div>
</section>
<article class="about_section_two">
<div class="about_describe">
<h1>
Hello Stranger! My name is Ania. I'm a passionate programmer.
</h1>
<h4>I am beginner Front-End Developer, seeking work in developing in an interesting company.
I am strongly motivated and interested in challenges offered by the area of programming.
I am a postgraduate of the Faculty of Management at the Warsaw University .
I worked for several years at the governmental institutions where I was responsible for the implementation of EU projects.
For the last three years I have been a happy mother of two children. During my free time
I am improving my skills in the front-development.
Over time I will post here my projects.
</h4>
</div>
</article>
</div>
</div>
</section>
<section class="skills">
<div class="container">
<div class="skills_name">
<h1>Skils</h1>
</div>
<section class="skills_toUse">
<div class="skills_about_toUse">
<h1>technologie, których używam na codzień:</h1>
</div>
<div class="skills_pictures">
<div class="skills_picture"><i class="fab fa-html5 icon"></i></div>
<div class="skills_picture"><i class="fab fa-js icon"></i></div>
<div class="skills_picture"><i class="fab fa-css3-alt icon"></i></div>
</div>
</section>
</div>
</section>
.about{
height: 100%;
.about_title {
height: 5vh;
margin-bottom: 30px;
width: 150px;
h1 {
width: 100%;
text-transform: uppercase;
border-bottom: 3px solid white;
color: $fontColor;
font-size: 25px;
height: 100%;
@media #{$desktop} {
font-size: 20px;
width: 100%;
}
@media #{$tablet, $smartphone, $phone, $smallphone} {
width: 100%;
font-size: 20px;
}
&:hover {
border-bottom: 3px solid red;
transition: border-bottom 0.3s ease;
}
}
}
.skills {
background-color: rgb(170, 252, 252);
height: 100%;
min-height: 800px;
.skills_name {
height: 20vh;
padding-top: 20px;
margin-left: 10px;
h1 {
width: 10%;
text-transform: uppercase;
border-bottom: 3px solid rgb(170, 252, 252);
color: $fontColor;
font-size: 25px;
&:hover {
border-bottom: 3px solid red;
transition: border-bottom 0.3s ease;
}
}
}
.skills_toUse {
display: flex;
flex-direction: column;
align-items: center;
.skills_about_toUse {
height: 30vh;
h1 {
text-align: center;
font-size: 25px;
color: $fontColor;
}
}
}
}