CODEWITHSUNDEEP
cssmedia-queries
Drekast
Drekast

Reputation: 31

Why is my media-query switching my mobile-first design?

I designed a website mobile-first and used a media query to make two columns sit next to each other once the screen expands. Instead it made a grid on my mobile version and I have whitespace on the bottom of my tablet version

If I switch the min to max it just goes to my mobile-first design ignores the media query CSS Grid altogether (as expected) for the tablet and desktop version

@media (min-width: 600px) {
    .authentic {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-areas: 'bowl content';
        height: 100%;
        margin: 0px;
    }

    .right-col {
        grid-area: content;
        padding: 0 10%;
        text-align: left;
        align-self: center;
    }
}

Here's the HTML if it helps

<section class="authentic">
    <div class="right-col">
        <h2>Authentic. Awesome.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aliquam id ullam vel quia voluptatem nobis nisi error nihil saepe!</p>
    </div>
    <img src="images/dumpling.jpeg" alt="Dumplings in a bowl" />
</section>

Here is the full HTML and CSS code for full reference:

HTML

<!doctype html>
<!-- Fun project to help me learn responsive layout design -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Yummy Eats</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="hero-bg">
        <section class="top">
            <header>
                <a href="#">yummy.eats</a>

            </header>

            <h1><span>The Healthy </span> Eating Experience</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eius impedit porro similique officiis
                eligendi, asperiores maxime est praesentium libero.</p>

            <div class="form-container">
                <form action="">
                    <div class="form-left">
                        <label for="city">Enter your city:</label>
                        <input type="text" name="city" id="city">
                        <p>Example: "San Diego"</p>
                    </div>
                    <input type="button" value="Find Food Now">
                </form>
            </div>

        </section>

    </div>
    <section class="authentic">
        <div class="right-col">
            <h2> Authentic. Awesome.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aliquam id ullam vel quia voluptatem
                nobis nisi error nihil saepe!</p>
        </div>
        <img src="images/dumpling.jpeg" alt="Dumplings in a bowl" />
    </section>


</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

/*Margin affects outside. Padding affects inside */

/*Custom Properties */
:root {
    --leading: 2em;
}

body {

    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

.hero-bg {
    background: #307D99 url('images/bg.jpg');
    color: white;
    text-align: center;
    padding-bottom: 4em;
    padding-top: 1em;
    /* for margin and padding its good to use em */
}

header {
    padding: 1em 5em 3em 10em;

}

.hero-bg a {
    color: white;
    text-decoration: none;
    /* ^^this removes url underlining */
    font-weight: bold;
    font-size: 1.2rem;
    /*for text we use rem */
}

section {
    margin: 0 1em;
}

h1 {
    font-size: 2.5rem;
    margin: 2em 0 1.2em;

}

h1 span {
    text-transform: uppercase;
    display: block;
    /* display:block puts things on their own line, nothing is on the right or left to it */
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}

h1 span::before {
    content: ' ';
    position: absolute;
    width: 3em;
    background: #00BFFF;
    height: .4em;
    bottom: 0;
    z-index: -1;
    margin-left: -.3em;
}

.hero-bg p {
    font-weight: bold;
    margin: 0 1em 3em;
    /* font-size: .759rem; */



}

.form-container {
    background-color: white;
    margin: 2em -1em 0;
    padding: 2em;

}

label {
    color: #2D7D98;
    font-weight: bold;
    display: block;
    margin-bottom: 1em;
    font-size: 1.2em;

}

input[type=text] {

    border: 1px solid #707070;
    width: 100%;
    padding: 1em;
    border-radius: .5em;
    margin-top: 1.2em;
    box-sizing: border-box;
}

.form-container p {
    color: gray;
    margin-bottom: 1.5em;
    font-weight: normal;
    font-size: .9em;
    margin-top: .3em;

}

input[type=button] {
    background-color: #F89104;
    border: none;
    width: 100%;
    color: white;
    font-weight: bold;
    padding: 1em 0;
    border-radius: .5em;
    font-size: 1.3em;
    cursor: pointer;
}

input[type=button]:hover {
    background-color: #bb690a;

}

.authentic {

    margin: 0;

}

.right-col {
    text-align: center;
    margin: 3em 1em;

}

h2 {
    text-transform: uppercase;
    position: relative;

}

h2::before {
    content: ' ';
    position: absolute;
    width: 8em;
    background: #00BFFF;
    height: .4em;
    bottom: 0;
    z-index: -1;
    margin-left: -.3em;
}

img {

    width: 100%;
    /* this is super important if you are using images to get your website to fit the entire page */
}

p {
    line-height: var(--leading);
}

/* Media query put in place to change the width for the section (form) when the user enlarges the screen into desktop format */
@media (min-width: 730px) {
    section {
        margin: 0 4em;
    }

    .form-container {
        margin: 2em 4em 0;

    }

}

@media (min-width: 600px) {
    .hero-bg {
        text-align: left;
    }

    .hero-bg p {
        margin: 0 0 3em;
    }

    .hero-bg section {
        width: 65%;
    }

    .form-container {
        margin: 2em 0 0;
        padding: 2em;
        border-radius: .5em;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
    }

    form {
        display: flex;
    }

    .form-left {
        width: 70%;
    }

    label {
        margin: 0;
    }

    input[type="button"] {
        height: fit-content;
        font-size: 1.1em;
        margin-left: 1em;
        margin-top: 2.2em;
        padding: .7em 0;
        width: 30%;
    }

    /* CSS Grid Usage: put the text and bowl next to each other and then changed the order by putting the bowl on the left
    since it came before content in grid-template-areas */
    .hero-bg p {
        margin-bottom: 0px;
    }

    .authentic {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-areas: "bowl content";
        height: 100%;
        margin: 0px;
    }

    .right-col {
        grid-area: content;
        padding: 0 10%;
        text-align: left;
        align-self: center;

    }

    img {
        grid-area: bowl;
    }

    h2 {
        margin: 0;
    }

}


/* A fadeIn effect for the top section */
.top {

    animation: fadeIn 4s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-2em);
    }

    to {
        opacity: 1;
        transform: translateY(-2em);

    }

    @keyframes overlay {
        0% {
            opacity: 0;
        }

        30% {
            1;
        }

        70% {
            1;
        }

        100% {
            0;
        }
    }
}

Upvotes: 1

Views: 69

Answers (1)

Johannes
Johannes

Reputation: 67798

Concerning the height / whitespace at the bottom, you should add

html, body {
  height: 100%;
}

Otherwise the .authentic element`s 100% height has no height to refer to.

Concerning the other details, you have to add more details (i.e. code) to your question (i.e. the full relevant CSS and HTML code, not only the media query and part of the HTML)

Upvotes: 1

Related Questions