1
I wrote my portfolio a while back and tried to make it responsive. I used the Mobile First technique. In cellular resolution it got massive, but when I made the first responsiveness to 600px wide resolution, it only works when I run the code, when I put it active, it doesn’t get responsive.
I’ll post the footage and the code so you can help me.
thank you in advance!
/* ----------- RESET ----------- */
*{
margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'Muli', sans-serif;
}
body {
background-color: #f5f5f5;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
@charset "UTF-8";
body {
width: 100%;
float: left;
background-color: #DCDCDC;
}
a{
text-decoration: none;
}
/*CABEÇALHO*/
.top_down_bc{
background: linear-gradient(to top, #ffffff, #00BFFF);
width: 100%;
}
header.cabecalho {
position: fixed;
display: grid;
grid-template-columns: 20% 60% 20%;
justify-content: space-between;
padding: 2% 3%;
}
img#logo {
width: 100%;
}
img#description {
width: 100%;
padding: 12.5% 5px 0 5px;
}
.btn-menu {
width: 95%;
height: 95%;
float: right;
text-align: center;
color: #ffffff;
border-radius: 50px;
cursor:pointer;
background: linear-gradient(to right,#09e7a7,#2cbfc8);
}
/* MENU */
.menu {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
.btn-close {
font-size: 3em;
color: #ffffff;
float: right;
cursor: pointer;
margin-right: 5%;
}
.menu ul {
width: 100%;
float: left;
text-align: center;
}
.menu li {
padding: 1.5%;
}
.menu li a {
font-size: 2em;
color: #fff; padding: 1.5% 3%;
}
.menu li a:hover {
border: 1px solid #2cbfc8;
}
.apresentations {
width: 50%;
margin: 20% 0 0 25%;
}
/* Apresentation */
div.banner {
margin: 1% 0 0 0;
width: 100%;
float: left;
text-align: center;
padding: 1% 5%;
background: linear-gradient( to top, #58FA82, #58FAAC, #58FAD0);
border-radius: 50px;
line-height: 1.8em;
}
p.coment {
text-align: justify;
}
h1.titulo {
font-size: 2em;
font-weight: 700;
}
h2.coment {
padding: 1% 0;
font-weight: 600;
}
/* About Me */
button.btn-ensino {
transition: background-color 2s, font-size 1s;
border: double 5px;
font-size: 1.2em;
cursor: pointer;
width: 100%;
border-radius: 25%;
padding: 5%;
margin: 1% 0%;
background: linear-gradient(to right, #4169E1, #1E90FF, #00BFFF);
}
button.btn-ensino:hover {
cursor: pointer;
color: #fff;
font-size: 1.4em;
text-shadow: 5px 5px #000;
width: 100%;
border-radius: 25%;
padding: 8%;
margin: 1% 0%;
background: linear-gradient(to right, #00BFFF, #1E90FF, #4169E1);
}
div#about_me {
width: 100%;
float: left;
text-align: center;
padding: 3% 4%;
background: linear-gradient(to top, #FFFF00, #FFD700, #FFA500, #FF8C00, #FF4500);
border-radius: 50px;
}
div.ensinos {
display: none;
width: 100%;
height: 100%;
position: fixed;
background: linear-gradient(to top, #000000, #696969, #808080);
top: 0;
left: 0;
}
h2.titulo_ensino {
margin: 25% 0;
color: #DCDCDC;
font-size: 1.3em;
font-weight: 980;
}
p.paragrafo_ensino {
font-size: 1.1em;
}
div.ensino-tecnico {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
div.ensino-superior {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
button.btn-cert {
transition: font-size 1s;
cursor: pointer;
background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
width: 100%;
margin: 2% 0;
padding: 5%;
border-radius: 15px;
}
button.btn-cert:hover {
cursor: pointer;
background: linear-gradient(to right, #A9A9A9, #808080, #696969, #000);
width: 100%;
margin: 2% 0;
padding: 5%;
border-radius: 15px;
color: #fff;
font-size: 1.3em;
}
i.far {
padding: 2%;
}
/* Exemplos de sites */
div#sites {
background: linear-gradient(to top, #00FA9A, #00FF7F, #98FB98, #90EE90);
width: 100%;
border-radius: 18px;
}
header#sites_titulo {
margin: auto;
font-size: 2em;
font-weight: 700;
text-align: center;
}
img#img_banner {
float: right;
margin: auto;
}
button.btn-sites {
transition: font-size 1s;
cursor: pointer;
background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
width: 100%;
margin: 2% 0;
padding: 5%;
border-radius: 15px;
}
button.btn-sites:hover {
cursor: pointer;
background: linear-gradient(to right, #A9A9A9, #808080, #696969, #000);
width: 100%;
margin: 2% 0;
padding: 5%;
border-radius: 15px;
color: #fff;
font-size: 1.3em;
}
/* Contacts */
div#corpo {
background: linear-gradient(to bottom, #8B0000, #FF4500, #FF8C00, #FFA500);
width: 100%;
border-radius: 18px;
padding: 5% 0;
}
table#tabela {
width: 70%;
margin: auto;
border: double;
border-radius: 25px;
border-spacing: 20px;
}
th.titulos {
border-bottom: solid 0.1em;
font-size: 1.5em;
}
#number_phone {
font-size: 1.2em;
text-align: center;
font-weight: 800;
}
.link_dados {
font-size: 3em;
color: #191970;
padding-left: 25%;
}
footer {
margin-top: 10%;
}
.footer_information {
text-align: center;
font-weight: 800;
padding: 2px;
}
/*================================Mobile First========================*/
/*================================ 600px ========================*/
@media screen and (min-width: 600px) {
.top_down_bc{
background: linear-gradient(to top, #ffffff, #00BFFF);
width: 100%;
}
header.cabecalho {
position: fixed;
display: grid;
grid-template-columns: 20% 60% 20%;
justify-content: space-between;
padding: 0% 0%;
}
img#logo {
width: 60%;
margin: auto;
}
img#description {
width: 60%;
margin: -6% auto;
}
.btn-menu {
width: 50%;
height: 80%;
margin: auto;
text-align: center;
color: #ffffff;
border-radius: 50px;
cursor:pointer;
background: linear-gradient(to right,#09e7a7,#2cbfc8);
}
/* MENU */
.menu {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
.btn-close {
font-size: 3em;
color: #ffffff;
float: right;
cursor: pointer;
margin-right: 5%;
}
.menu ul {
width: 100%;
float: left;
margin: -10% auto;
text-align: center;
}
.menu li {
padding: 1.5%;
}
.menu li a {
font-size: 1.6em;
color: #fff; padding: 1.5% 3%;
}
.menu li a:hover {
border: 1px solid #2cbfc8;
}
.apresentations {
width: 20%;
margin: 10% 0% 0% 40%;
}
/* Apresentation */
div.banner {
width: 100%;
float: none;
text-align: center;
padding: 1.5% 0%;
background: linear-gradient( to top, #58FA82, #58FAAC, #58FAD0);
border-radius: 50px;
line-height: 1.6em;
}
h1.titulo {
font-size: 2.3em;
font-weight: 700;
}
h2.coment {
padding: 1% 0;
font-weight: 600;
}
/* About Me */
button.btn-ensino {
transition: background-color 2s, font-size 1s;
border: double 5px;
font-size: 1.2em;
cursor: pointer;
width: 50%;
border-radius: 25%;
padding: 5%;
margin: 1% 0%;
background: linear-gradient(to right, #4169E1, #1E90FF, #00BFFF);
}
button.btn-ensino:hover {
cursor: pointer;
color: #fff;
font-size: 1.4em;
text-shadow: 5px 5px #000;
width: 60%;
border-radius: 25%;
padding: 8%;
margin: 1% 0%;
background: linear-gradient(to right, #00BFFF, #1E90FF, #4169E1);
}
div#about_me {
width: 100%;
float: left;
text-align: center;
padding: 3% 4%;
background: linear-gradient(to top, #FFFF00, #FFD700, #FFA500, #FF8C00, #FF4500);
border-radius: 50px;
}
div.ensinos {
display: none;
width: 100%;
height: 100%;
position: fixed;
background: linear-gradient(to top, #000000, #696969, #808080);
top: 0;
left: 0;
}
h2.titulo_ensino {
margin: 10% 25% 10% 25%;
color: #DCDCDC;
font-size: 1.3em;
font-weight: 980;
}
p.paragrafo_ensino {
font-size: 1.2em;
}
div.ensino-tecnico {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
div.ensino-superior {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
p.paragrafo_certificado {
text-align: center;
}
button.btn-cert {
transition: font-size 1s;
cursor: pointer;
background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
width: 30%;
margin: 2% 35%;
padding: 1%;
border-radius: 15px;
}
button.btn-cert:hover {
transition: font-size 1s;
cursor: pointer;
background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
width: 32%;
margin: 2% 35%;
padding: 1%;
border-radius: 15px;
}
i.far {
padding: 2%;
}
/* Exemplos de sites */
div#sites {
background: linear-gradient(to top, #00FA9A, #00FF7F, #98FB98, #90EE90);
width: 100%;
border-radius: 18px;
}
header#sites_titulo {
margin: auto;
font-size: 2em;
font-weight: 700;
text-align: center;
}
img#img_banner {
float: right;
margin: auto;
}
button.btn-sites {
transition: font-size 1s;
cursor: pointer;
background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
width: 50%;
margin: 2% 25%;
padding: 5%;
border-radius: 15px;
}
button.btn-sites:hover {
transition: font-size 1s;
cursor: pointer;
background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
width: 51%;
margin: 2% 25%;
padding: 5%;
border-radius: 15px;
}
/* Contacts */
div#corpo {
background: linear-gradient(to bottom, #8B0000, #FF4500, #FF8C00, #FFA500);
width: 100%;
border-radius: 18px;
padding: 5% 0;
}
table#tabela {
width: 70%;
margin: auto;
border: double;
border-radius: 25px;
border-spacing: 20px;
}
th.titulos {
border-bottom: solid 0.1em;
font-size: 1.5em;
}
#number_phone {
font-size: 1.2em;
text-align: center;
font-weight: 800;
}
.link_dados {
font-size: 3em;
color: #191970;
padding-left: 40%;
}
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta name="description" content="This page it's my portfolio. Here you can know me and see my specifications.">
<meta name="keywords" content="portfolio, Harysson, Haryinfo, desenvolvimento, web"/>
<meta name="robots" content="index, follows"/>
<meta name="author" content="Harysson Soares"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Haryinfo</title>
<link rel="stylesheet" type="text/css" href="CSS/main_estilo.css"/>
<script language="javascript" src="JavaScript/funcoes.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
<link rel="icon" href="_images/logo_home.png"/>
</head>
<body id="inicio">
<header class="cabecalho top_down_bc">
<a href="index.html" id="link_home"><img src="_images/logo_home.png" id="logo"/></a>
<img src="_images/web_development.png" id="description">
<button class="btn-menu" alt="Menu"> <i class="fas fa-bars fa-lg" id="menu_icon"></i></button>
<nav class="menu">
<a class="btn-close"><i class="fa fa-times"></i> </a>
<ul>
<li onmouseover="mudaFoto('_images/logo_home.png')" onmouseout="mudaFoto('_images/logo_home.png')" class="list_menu"> <a href="#inicio" id="index" class="link_menu">HOME</a> </li>
<li onmouseover="mudaFoto('_images/about_me.png')" onmouseout="mudaFoto('_images/main.png')" class="list_menu"> <a href="#img_about_me" id="link_sobre_mim" class="link_menu" target="">SOBRE MIM</a> </li>
<li onmouseover="mudaFoto('_images/meus_trabalhos.png')" onmouseout="mudaFoto('_images/main.png')" class="list_menu"> <a href="#img_my_jobs" id="link_meus_trabalhos" class="link_menu">VITRINE DE SITES</a> </li>
<li onmouseover="mudaFoto('_images/contato.png')" onmouseout="mudaFoto('_images/main.png')" class="list_menu"> <a href="#img_contacts" id="link_contatos" class="link_menu">CONTATOS</a> </li>
<img src="_images/main.png" id="icone"/>
</ul>
</nav>
<script>
$(".btn-menu").click(function(){
$(".menu").show();
});
$(".btn-close").click(function(){
$(".menu").hide();
});
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 27){
$(".menu").hide();
}
});
});
$(".menu").click(function(){
$(".menu").hide();
});
</script>
</header>
<div class="img_principal">
<img src="_images/main.png"/ id="hi" class="apresentations"/>
</div>
<div class="banner">
<h1 class="titulo">Bem vindo ao futuro</h1>
<h2 class="coment">Quanto você gasta em um anúncio da sua empresa?</h2>
<h2 class="coment">Qual o alcance do tipo de anúncio usado por sua empresa?</h2>
<h2 class="coment">O sua empresa possui um site? Acha que ela representa bem a sua empresa?</h2>
<h2 class="coment">Você acha que um site serve apenas como propaganda e portfolio para sua empresa?</h2>
</div>
<div>
<img src="_images/about_me.png" id="img_about_me" class="apresentations">
</div>
<div id="about_me">
<header id="cabecalho" class="topico">
<h1 class="titulo">SOBRE MIM</h1>
</header>
<h2 class="coment">Meus conhecimentos</h2>
<p class="paragrafo coment">Atualmente possuo conhecimento em HTML5, CSS e JavaScript para o desenvolvimento Web. Além de conhecimentos para desenvolvimento Web, também possuo conhecimento sobre SQL, para banco de dados, PHP e Java.Esse conhecimento foi adquirido através de cursos com certificação. Para conferir essa certificação, acesse o link acima com o nome "CERTIFICAÇÕES".</p>
<h2 class="coment">Progresso Educacional</h1>
<button id="btn-basico" class="btn-ensino">Ensino Básico <i class="fas fa-angle-double-right"></i></button>
<button id="btn-tecnico" class="btn-ensino">Ensino Técnico <i class="fas fa-angle-double-right"></i></button>
<button id="btn-superior" class="btn-ensino">Ensino Superior <i class="fas fa-angle-double-right"></i></button>
<div id="ensino-basico" class="ensinos">
<a class="btn-close"><i class="fa fa-times"></i></a>
<h2 id="ensino_basico" class="titulo_ensino">Ensino Básico (fundamental e médio)</h2>
<p class="paragrafo_ensino">Todo meu ensino básico foi feito no Instituto Reis Magos (IRM). Escola privada que me deu bolsa desde a pre-escola, sobre a condição de manter notas boas e evitar as recuperações.</p>
</div>
<div id="ensino-tecnico" class="ensinos">
<a class="btn-close"><i class="fa fa-times"></i></a>
<h2 id="ensino_tecnico" class="titulo_ensino">Ensino Técnico</h2>
<p class="paragrafo_ensino">Atualmente estou cursando ensino técnico no Instituto Metrópole Digital (IMD). O IMD possui vínculo com UFRN e empresas do ramo da tecnologia, como Microsoft e CISCO.</p>
<p class="paragrafo_ensino">Pretendo fazer o ensino superior na UFRN (Bacharel em Tecnologia da Informação - BTI), porém sempre estou estudando e fazendo cursos sobre desenvolvimento Web e demais tecnologias.</p>
</div>
<div id="ensino-superior" class="ensinos">
<a class="btn-close"><i class="fa fa-times"></i></a>
<h2 id="ensino_superior" class="titulo_ensino">Ensino Superior</h2>
<p class="paragrafo_ensino">Minha formação é em Bacharel Ciências Biológicas, com ênfase em microbiologia. Essa área me trouxe muitos questionamentos sobre a Biotecnologia, o que me levou a estudar mais sobre programação.</p>
</div>
<script>
$("#btn-basico").click(function(){
$("#ensino-basico").show();
});
$(".btn-close").click(function(){
$("#ensino-basico").hide();
});
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 27){
$("#ensino-basico").hide();
}
});
});
$("#btn-tecnico").click(function(){
$("#ensino-tecnico").show();
});
$(".btn-close").click(function(){
$("#ensino-tecnico").hide();
});
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 27){
$("#ensino-tecnico").hide();
}
});
});
$("#btn-superior").click(function(){
$("#ensino-superior").show();
});
$(".btn-close").click(function(){
$("#ensino-superior").hide();
});
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 27){
$("#ensino-superior").hide();
}
});
});
</script>
<section id="da_biologia_para_tecnologia" class="topico">
<h2 class="coment">Da Biologia para Tecnologia</h2>
<p class="paragrafo coment">Diante de vários questionamentos sobre a mudança de área, ou mesmo qual a relação entre elas, a resposta é bem simples. O ramo da Biotecnologia me fez ver que no Brasil há uma carência muito grande do uso e do desenvolvimento de ferramentas tecnológicas. Acredito que vai além do ramo da biologia. A carência de programadores é muito grande, e isso não só no Brasil, mas no mundo inteiro. Então fica claro ver que não só a Biologia possui relação com a tecnologia, mas todas as áreas convergem para ela.</p>
</section>
<section id="certificacoes" class="topico">
<h2 class="coment">Certificações</h2>
<p class="paragrafo_certificado">HTML, CSS e JavaScript:<a href="_images/HTML5.jpg" target="_blank"><button class="btn-cert">Certificado<i class="far fa-file-alt"></i></button></a></p>
<p class="paragrafo_certificado">Java:<a href="_images/certificado Java.pdf" target="_blank"><button class="btn-cert"> Certificado<i class="far fa-file-alt"></i></button></a></p>
<p class="paragrafo_certificado">Montagem e Manutenção de computadores:<a href="_images/certificado Montagem e Manutenção de computadores.pdf" target="_blank"><button class="btn-cert">Certificado<i class="far fa-file-alt"></i></button></a></p>
<p class="paragrafo_certificado">Congresso Online de Tecnologia da Informação:<a href="_images/Certificado TI.pdf" target="_blank"><button class="btn-cert">Certificado<i class="far fa-file-alt"></i></button></a></p>
</section>
</div>
<div id="my_jobs">
<img src="_images/meus_trabalhos.png" id="img_my_jobs" class="apresentations" />
<div id="sites">
<img src="_images/projects.png" id="img_banner"/>
<header id="sites_titulo">
<h1 id="titulo">Sites criados por mim</h1>
</header>
<section id="lista_sites">
<h2 id="google_glass"> <a href="projeto-glass-html5/index_google_glass.html" class="link_sites" target="_blank" onmouseover="mudaFotoMyJobs('_images/google-glasses_mobile.png')" onmouseout="mudaFotoMyJobs('_images/projects.png')"><button class="btn-sites" id="btn-google-glass"> Site sobre Google Glass <i class="fas fa-external-link-alt"></i></button></a></h2>
<h2 id="cpc"> <a href="Site_CPC/index_CPC.html" class="link_sites" target="_blank" onmouseout="mudaFotoMyJobs('_images/projects.png')" onmouseover="mudaFotoMyJobs('Site_CPC/image/logo_CPC_200x200_mobile.png')"><button class="btn-sites" id="btn-cpc"> Site para o Centro Pedagógico de Candelária (CPC)<i class="fas fa-external-link-alt"></i></button></a></h2>
<h2 id="hi"> <a href="index.html" class="link_sites" target="_blank" onmouseout="mudaFotoMyJobs('_images/projects.png')" onmouseover="mudaFotoMyJobs('_images/logo_home_mobile.png')"><button class="btn-sites" id="btn-home"> Este que vos é apresentado(Hi Tech)<i class="fas fa-external-link-alt"></i></button></a></h2>
<h2> <p onmouseout="mudaFotoMyJobs('_images/projects.png')" onmouseover="mudaFotoMyJobs('_images/emoticon_mobile.png')"> <button class="btn-sites" id="btn-nothing-do">O Próximo da lista, poderia ser sua empresa!</button></p></h2>
</section>
</div>
</div>
<div id="contacts">
<img src="_images/contato.png" id="img_contacts" class="apresentations"/>
<div id="corpo">
<table id="tabela">
<tr class="linha_titulo">
<th class="titulos" colspan="2">Telefone/WhatsApp</th>
</tr>
<tr class="linha_information">
<td colspan="2" class="dados"><h1 id="number_phone">(84)99819-0309</h1></td>
</tr>
<tr class="linha_titulo">
<th class="titulos" colspan="2">Redes Sociais</th>
</tr>
<tr class="linha_information">
<td class="dados"><a href="https://www.facebook.com/profile.php?id=100011284782564" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/facebook.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-facebook-square facebook"></i></a></td>
<td class="dados"><a href="https://twitter.com/haryssonsoares" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/twitter.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-twitter-square twitter"></i></a></td>
</tr>
<tr class="linha_titulo">
<th class="titulos" colspan="2">Redes Profissionais</th>
</tr>
<tr class="linha_information">
<td class="dados"><a href="https://www.linkedin.com/in/harysson-soares-96476099/" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/linkedin.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-linkedin linkedin"></i></a></td>
<td class="dados"><a href="https://github.com/Rharuow" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/github.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-github-square github"></i></a></td>
</tr>
</table>
</div>
</div>
<div id="rodape">
<footer class="top_down_bc">
<h1 class="footer_information">Todos direitos reservados por:</h1>
<h1 class="footer_information"><i class="far fa-copyright"></i>HI Tech Web Development</h1>
<h1 class="footer_information">Last Update: 26/05/2018</h1>
</footer>
</div>
</body>
</html>
Greetings, Harysson; welcome to the site. Since it’s new, I suggest you take the [tour] to learn the basics of how the community works and read the [Ask] guide. Try to better describe your problem and read about how to elaborate a [mcve] to reduce the complexity of your question and focus only on what is needed.
– Woss
Read here and learn how to use media queries correctly https://tableless.com.br/introducao-sobre-media-queries/
– Adriano Silva