Site does not get responsive in Mobile dimension

Asked

Viewed 157 times

0

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

I have tried media screen but could not. Any suggestion to make it fully responsive, in all browsers?

Also, as I am new to WEB development, with my code below if you have some tips or better formatting to do, I would 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 responsive-layout responsive
  • 2

    Dude there is no tag that makes the site all responsive, you have to create your CSS rules for every breacking point set in @media.... In your case you basically only put 2 medias queris media(max-width: 850px) and 800px. You have to make rules for example 768px 540px and 320px treating your CSS in each of them... If you want an element to disappear or only appear on screens smaller than 540px, or if some element should be 100% wide in 320px etc, so on... And the midia query should be the last lines of your CSS they should not come in the middle of the code, it has to be at the end!

1 answer

1

Hello @Matheus Lopes,

Add this tag to the top of your website:

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

  • This will cause the display on the device to be scaled to the mobile.

  • We need to verify each resource in relation to its adaptation, such as header, footer and other contents present on your site.

  • Experience media query this way:

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

  • Failed, I put the meta tag in the HTML and in the case of @media I could not find the property so that the entire site has not been reduced

  • Hi @Matheus Lopes, with the meta tag viewport Scale=1.0, the view should be 100% in your cell. Clean the history/cache in your mobile browser so we can do a full test. Regarding media query, you need to adapt each feature, such as the menu buttons present in the header.. boxes in the layout, navbar.. vc will build according to the ratio... will not only be a property or class q will adapt general, but the adaptation of each component as needed...

  • for example: @media all and (min-width:1px) and (max-width:320px){ . menu-Nav li{ width:100% } }

Browser other questions tagged html css responsive-layout responsive

You are not signed in. Login or sign up in order to post.