Website is not responsive in the Mobile dimension

Question

Website is not responsive in the Mobile dimension

Navigation

#1 by (1 votes)

0

I've been creating the website with the code below but I can not make it responsive on the MOBILE part (320x568), the content is on the left side and on the right side is a large white part on the whole site.

I've tried media screen but I could not. Any suggestions to make you fully responsive in all browsers?

Also, since I'm new to WEB development, with my code below if you have some better tips or formatting to do, I'd be grateful to hear them.

<!DOCTYPE html>
<html>
<head>
    <title>FlexBlog</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link rel="shortcut icon" href="images/web_hi_res_512.png" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>

    <header class="menu-bg">
        <div class="menu">
            <div class="menu-logo">
                <img href="#" src="images/logo.png">    
            </div>
            <nav class="menu-nav">
                <ul>
                    <li><a href="#sobre">Home</a></li>
                    <li><a href="#produtos">Products</a></li>
                    <li><a href="#preco">About</a></li>
                    <li><a href="#qualidade">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="principal">
        <h1> WELCOME TO THE INFINITY.</h1>
        <h2>THANKS FOR VISITING THE INFINITY</h2>
        <h3>IT'S A PLEASURE TO HAVE YOU HERE. ENJOY THE WEBSITE AND THE PRODUCTS.</h3>
        <button type="button" name="" value="" class="css3button">Learn More</button>
    </section>

    <section class="conteudo">
        <h1>More about the products</h1>
        <h2>We have several benefits that have left you impressed.</h2>
        <hr>
        <ul class="grid">
            <li>
                <img src="images/primeiro.png">
                <h2>SEO Searching Optimization</h2>
            <p>We have the best search engine optimization option. Your site will be among the top search engines like Google and Yahoo.</p>
        </li>

        <li>
                <img src="images/segundo.png">
                <h2>Responsive WebSite</h2>
            <p>We all know that it is essential to have a responsive website. Well, here at Infinity this aspect is a condition on all our sites.</p>
        </li>

        <li>
                <img src="images/terceiro.png">
                <h2>Most beautiful websites</h2>
            <p>We have the most beautiful sites in the internet.Everything we do here is make we love and attetion. Your website is gonnar be the most bright site.</p>
        </li>

        </ul>
    </section>
        <section class="newsletter">
            <h1>NewsLetter</h1>
            <hr>
            <p>Fill in the data below and we will send you recent updates every month to keep you updated on Infinity new</p>
                <form>
            <input type="text" name="escrever"value="Write your E-Mail">
            <button>Send</button>
                </form>


        </section>

        <footer>
            <ul>
                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li><a href="#"><i class="fas fa-at"></i></a></li>
                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
            </ul>

                <h2> All the rights reserved - Infinity 2018 ®</h1>
                <h1>Design by Matheus Luiz</h1>
            </footer>
</body>
</html>


CSS :

* {
    margin: 0;
    padding: 0;
    font-family: 'Arimo', sans-serif;
}
.menu-bg {
    background: black;
}

.menu {
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-family: 'Arimo', sans-serif;

}

.menu a {
    color: white;
    font-size: 1em;
    font-weight: bold;
}

.menu-logo img {
    margin-left: 30px;
    width: 250px;
}

.menu-nav ul{
    display: flex;
    flex-wrap: wrap;
}

.menu-nav a {
    display: block;
    padding: 20px;
    font-size: 1.3em;
    text-decoration: none;
}
.menu-nav a:hover {
    color:gray;
}
.principal {
    background-image: url(../images/one.jpg);
    background-size: cover;
    min-height: 60vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Arimo',sans-serif;
}

.principal h1 {
    margin-bottom: 100px;
    font-size: 5em;
    color: white;
}
.principal h2 {
    font-size: 1.25em;
    margin-bottom: 20px;
    flex-wrap: wrap;

}

.principal button {
-moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: #3cadd4;
        border-radius: 30px;
        border: 0;
        color: #ffffff !important;
        cursor: pointer;
        display: inline-block;
        font-weight: 400;
        height: 2.85em;
        line-height: 2.95em;
        padding: 0 2em;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1.25em;
        margin-top: 50px;
        margin-bottom: 30px;
    }

.principal button:hover {
            background-color: #51b6d9;
            text-decoration: none;
}


.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background-color: #dad8d8;
}
.conteudo h1 {
    font-size: 3em;
    margin-bottom: 15px;
    text-align: center;
}
.conteudo h2 {
    font-size: 1.9rem;
    margin-bottom: 35px;
    color: black;
    text-align:center;
}

.conteudo p {
    font-size: 1.4rem;
    color: #606060;
}

.conteudo hr {
    width: 200px;
    height: 2px;
    background-color: #606060;
    margin-bottom: 80px;
}

.conteudo .grid {
    width: 100%;
    display: flex;
    text-align: center;
}

.conteudo .grid li {
    padding: 30px;
}

.conteudo .grid li img {
    width: 150px;
    margin-bottom: 30px;
}

@media(max-width: 850px){
    .conteudo .grid {
        flex-direction: column;
    }
}

@media(max-width: 850px){
    .menu-nav {
        padding-left: 35px;
        padding-top: -10px;
    }
}

@media(max-width: 850px) {
    .menu-logo {
        margin: 0 auto;
    }
}

@media(max-width:800px) {
    .principal {
        padding-top: 10px;
        text-align: center;
    }
}

.newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.newsletter h1 {
    font-size: 3.5rem;
    padding-bottom: 10px;
    text-align: center;
}


.newsletter hr {
    width: 300px;
    height: 3px;
    background-color: black;
    margin-bottom: 40px;
    margin-top: 40px;
}

.newsletter p {
    font-size: 1.5rem;
    color: #606060;
    padding-bottom: 20px;
    text-align: center;
}
.newsletter form {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 
}

.newsletter input {
    padding: 15px;
    border: 1px solid #606060;
    border-radius: 4px;
    margin-right: 15px;
    width: 400px;
    margin-bottom: 20px;
}
.newsletter button {
    padding: 13px;
    border: 1px solid #606060;
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #606060;
    color: white;
}
.newsletter button:hover {
    color: white;
}

footer {
    background-color: black;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 50px 0;
    align-items: center;
}

footer h1 {
    color: white;
}

footer h2 {
    color:white;
    margin-bottom: 20px;
}

footer ul {
    display: flex;
    margin-bottom: 20px;
}
footer ul li {
    margin-right: 30px;
}

footer ul li:last-child {
    margin-right: 0;
}
footer ul li a {
    color: #606060;
    font-size: 4rem;
}

footer ul li a:hover {
    color: white;
}

html css layout-responsivo responsive

asked by anonymous 09.08.2018 / 16:12

1 answer

AJAX function to update table Problems implementing lib ng2-img-max!

score 1 · Answer 1

Hello @Matheus Lopes,

Add this tag at the top of your site:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will cause the view on the device to be interpreted scaled in proportion to the mobile.
We need to check each feature in relation to your adaptation, such as header , footer and other content on your site.

Try the media query this way:

@media all and (min-width:1px) and (max-width:320px){
     .nome_da_classe{
        propriedade:atributo
     }
}