Самый простой способ улучшить внешний вид на мобильных устройствах - это запрос CSS3 @media .Это позволяет вам устанавливать CSS для мобильных устройств для определенного размера устройства (в приведенном ниже примере, что-либо ниже портретной ширины iPad или шириной 768 пикселей).
Я закомментировал некоторые фиксированные ширины / высоты, которые не былиt Требуется (это позволяет браузеру расширять контент настолько, насколько это необходимо, без показа лишнего пространства или обрезки контента).Запрос @media изменяет первую строку в столбце, используя flex-direction, вместе с несколькими незначительными изменениями настроек margin для отдельных панелей.
Надеюсь, это поможет вам начать работу по оптимизации сайтов длямобильные устройства!
#welcome-section {
position: relative;
top: 50px;
margin: 30px;
/*height: 580px;*/
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.first-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
/*height: 110%;
width: 25%;*/
}
.second-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
margin-left: 30px;
/*width: 25%;
height: 110%;*/
}
.third-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
margin-left: 30px;
/*width: 25%;
height: 110%;*/
}
#projects {
background-color: #006400;
background-image: linear-gradient(to bottom, rgba(0, 133, 20, 1), rgba(39, 225, 20, 1));
color: white;
transform: translate(0, 60%);
padding: 30px;
width: 100%;
height: 240px;
display: inline-block;
}
#projects h1 {
text-align: center;
}
.project-tile {
display: block;
float: left;
text-decoration: none;
color: black;
font-weight: bold;
margin-left: 25px;
}
.project-tile:hover {
border:3px solid blue;
background-color: blue;
color: white;
text-decoration: none;
}
@media only screen and (max-width: 767px) {
#welcome-section {
flex-direction: column;
margin: 0;
}
.second-div-welcome-section,
.third-div-welcome-section {
margin-left: 0;
margin-top: 20px;
}
}
<section id="welcome-section">
<div class="first-div-welcome-section">
<img src="pics/me.jpg" alt="mypic" width="230px" height="290px">
<h1>Hi. I'm Cristian Antonescu.</h1>
<p><i class="fa fa-briefcase"></i> Front-end web developer</p>
<p><i class="fa fa-home"></i> Romania, Marasesti city</p>
<p><i class="fa fa-envelope"></i> cristian_antonescu1992@yahoo.com</p>
</div>
<div class="second-div-welcome-section">
<h3><i class="fa fa-drivers-license" style="font-size:24px"></i> Skills:</h3>
<ul>
<li>JavaScript</li>
<li>CSS3</li>
<li>HTML5</li>
<li>jQuery</li>
<li>Never ending ambition</li>
</ul>
<h3><i class="fa fa-anchor" style="font-size:24px"></i> My Journey:</h3>
<p>I began my web development journey mostly as a self-taught who has been learning the basics of HTML and CSS from <a href="http://w3schools.com">w3schools</a> and <a href="http://freecodecamp.com">freeCodeCamp</a> . I also participated in a online course where I improved a lot my web development skills, entering the wonderful realm of JavaScript.</p>
<p>What motivated me? My main motivation was and still is to create useful and well-designed webpages and apps which can improve and entertain peoples' lives, although I have to admit that I started to learn HTML not having any idea about how much beauty and addiction it can bring into my life. It was more like "Well I have some working neurons in my head, what can I do with them? Let's try programming and see where it goes!"</p>
</div>
<div class="third-div-welcome-section">
<h3><i class="fa fa-graduation-cap" style="font-size:24px"></i> Education:</h3>
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com:</b></h5>
<p class="w3-text-teal"><i class="fa fa-calendar"></i> Jan 2016 - <span>Current</span></p>
<p>There's a never ending phase when it comes to learning programming! I'm always eager to improve my skills!</p>
<h5 class="w3-opacity"><b>Front End Developer / freeCodeCamp.com:</b></h5>
<p class="w3-text-teal"><i class="fa fa-calendar"></i> Feb 2017 - <span>Current</span></p>
<p>I've done a lot of the demanded projects and exercises available on freeCodeCamp!</p>
</div>
</section>
<section id="projects">
<h1 class="some-heading">Check out some of my work:</h1>
<a href="https://github.com/cristopher927/motivational-web-app" class="project-tile" target="_blank">
<img src="pics/quote-generator.jpg" alt="quote generator app pic" width="180px" height="155px"><br>Quote generator app
</a>
<a href="https://github.com/cristopher927/technical-documentation-page-about-JavaScript" class="project-tile" target="_blank">
<img src="pics/documentation_page.png" alt="documentation page pic" width="250px" height="155px"><br>Documentation page about JavaScript
</a>
<a href="https://github.com/cristopher927/tribute-page-to-Max-Tegmark" class="project-tile" target="_blank">
<img src="pics/tegmark.png" alt="tribute-page-to-Max-Tegmark pic" width="250px" height="155px"><br>Tribute page to Max Tegmark
</a>
<a href="https://github.com/cristopher927/Survey-about-the-web" class="project-tile" target="_blank">
<img src="pics/web.png" alt="Survey about the web pic" width="250px" height="155px"><br>Survey about the web
</a>
</section>