Search code examples
htmlcssresponsive-designcss-gridresponsive-images

How to wrap text down a page when page width decreases

I am working inside a CSS Grid structure with an image on the left and block of text on the right. When I decrease the page width, the image and text both resize to fit the width of the page. However, when I go past 475px, the layout breaks and the image and text extend off the page.

Why is this happening and how can I fix it? I've tried media queries to no avail.

In my skills section below, I have no problem flowing the text down the page when the page width decreases, so I am puzzled with the section above it does not flow.

Note: Original image size is 3024px × 4032px

* {
    padding: 0;
    margin: 0;

}

:root {
    --main--color: #2E64C6;
    --main--hover--color: rgb(27, 62, 126);
}

body {
    max-width: 1087px;
    margin: 0 auto;
    padding: 0 40px;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: var(--main--color);
}

/* type */
.logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 700
}

.title {
    font-family: 'Hind', sans-serif;
    font-size: 40px;
    line-height: 50px;
}

.sub-head {
    font-family: 'Hind', sans-serif;
    font-size: 20px;
}

.body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 30px;
    color: rgb(114, 114, 114);
}

.footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.read-more {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.info-container {
    margin-top: 18px;
}

.contact-info {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 31px;
}

.paragraphs {
    margin-top: 21px;
}

.body:nth-child(2) {
    margin-top: 30px;
}

/* spacing */
.intro {
    margin-top: 64px;
}

.define {
    color: var(--main--color);
}

.skills,
.projects,
.contact {
    margin: 187px auto;
}

.bold {
    font-weight: bold;
}

/* nav */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
}

.r-nav {
    display: flex;
}

.nc:nth-child(n) {
    margin-left: 30px;
}

/* intro */
.intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 40px;
}

.intro-email {
    text-align-last: right;
}

/* skills */
.skills {
    max-width: 773px;
    text-align: center;
}

.skills-list {
    margin-top: 40px;
    display: flex;
    justify-content: space-evenly;
    flex-flow: wrap;
}

li {
    list-style-type: none;
}

/* projects */
.projects>.title {
    text-align: center;
}

.project-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-auto-rows: auto;
    margin-top: 40px;
    justify-content: center;
    grid-gap: 50px;
}

.img {
    background-color: rgb(255, 183, 183);
    height: 285px;
    width: 415px;
}

.item>.title {
    margin-top: 30px;
}

.item>.body {
    max-width: 80%;
}

.item>.read-more {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.material-icons {
    font-size: 1em
}

/* contact */
.contact {
    text-align: center;
}

/* footer */
.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}

.footer-text>a:hover {
    color: var(--main--hover--color);
}

@media only screen and (max-width: 1041px) {
    .title {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .intro {
        background-color: #45267525;
    }
}

@media only screen and (max-width: 919px) {
    .title {
        font-size: 5.4vw;
        line-height: 5.4vw;
    }

    .intro {
        background-color: #ff000025;
    }
}

@media only screen and (max-width: 540px) {
    .title {
        font-size: 7vw;
        line-height: 8vw;
    }

    .intro {
        background-color: #e5ff0025;
    }
}

@media only screen and (max-width: 430px) {
    .skills-list {
        padding: 0 30px
    }

    .item {
        background-color: rgba(145, 255, 0, 0.164);
    }

    .item>.body {
        max-width: 95%;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Hind:700|Montserrat:400,700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/34a50a5364.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="mediaQueries.css">
    <title>Tyler Morales – Front End Developer</title>
</head>

<body id="top">
    <div class='nav'>
        <div class='logo'>tmo.</div>
        <div class='r-nav'>
            <div class='sub-head nc'><a href="#projects">Projects</a></div>
            <div class='sub-head nc'><a href="#contact">Contact</a></div>
        </div>
    </div>

    <div class='intro'>
        <div class='l-intro'>
            <img src="imgs/cafe.jpg" alt="profile image">
            <a href="mailto:[email protected]?Subject=Greetings" target="_top">
                <div class='sub-head intro-email'>[email protected]</div>
            </a>
        </div>
        <div class='r-intro'>
            <div class='title'>Hello, world 🌎, I’m Tyler!<br>
                <span class='define'>Front End Developer</span> </br>
                & <span class='define'>UX Designer</span></div>
            <div class="paragraphs">
                <p class='body'>Ever since a young age, I’ve been interested in technology and design. Through being
                    the first generation to grow up with the internet to building countless wood projects and creative
                    spaces, <span class="bold">purposeful design</span> has been important to me. Ultimately, this
                    fascination with <span class="bold">creativity</span> and <span class="bold">design</span> has led
                    me to find web development the perfect landscape to extend my passion towards building <span
                        class="bold">interactive</span> and <span class="bold">intuitive</span> web experiences.
                </p>
                <p class="body">Along with development, I am very active in the developer community online and in
                    local Chicago meetups. I, amongst others, build up and <span class="bold">motivate</span> other like
                    minded individuals, <span class="bold">document</span> our progress and <span
                        class="bold">learn</span>
                    the latest technologies with developers <span class="bold">globally</span>! Currently, I am studying
                    Web
                    Development and Design at <span class="bold">College of Dupage</span> and plan on continuing my
                    education at <span class="bold">Columbia College</span>.</p>
            </div>
        </div>
    </div>

    <div class='skills'>
        <div class='title'>Skills</div>
        <p class="body">In addition to my college courses, I have completed online classes to further my front end
            knowledge. Courses include: <span class="bold">Javascript 30</span>, <span class="bold">Advanced CSS and
                SASS</span> & <span class="bold">The Modern Javascript Bootcamp (2019)</span>
        </p>
        <div class='skills-list'>
            <li class="sub-head">HTML</li>
            <li class="sub-head">CSS</li>
            <li class="sub-head">JAVASCRIPT</li>
            <li class="sub-head">ADOBE CC</li>
        </div>
    </div>

    <div id="projects" class='projects'>
        <div class='title'>Projects</div>
        <div class='project-container'>

            <div class='item'>
                <img src="imgs/tyler.jpg" alt="">
                <div class='title'>Travel Planner</div>
                <p class="body">A simple web application to document how and where to travel. Simply enter a few stats
                    about your next trip and allow the app do the rest for you.
                </p>
                <div class='read-more'><a href="#">Read More <i class="fas fa-arrow-right"></i></a></div>
            </div>
            <div class='item'>
                <img src="imgs/tyler.jpg" alt="">
                <div class='title'>Travel Planner</div>
                <p class="body">A simple web application to document how and where to travel. Simply enter a few stats
                    about your next trip and allow the app do the rest for you.
                </p>
                <div class='read-more'><a href="#">Read More <i class="fas fa-arrow-right"></i></a></div>
            </div>

        </div>
    </div>

    <div id="contact" class='contact'>
        <div class='title'>Let's Connect</div>
        <div class='info-container'>
            <li class='contact-info'>Tyler Morales</li>
            <li class='contact-info'>773 318 8539
            <li>
                <a href="mailto:[email protected]?Subject=Greetings" target="_top" class='contact-info intro-email'>
                    [email protected]
                </a>
            </li>
        </div>
    </div>

    <div class='footer'>
        <div class='logo'><a href="#top">tmo.</a></div>
        <div class='r-nav'>
            <div class='footer-text nc'><a target="_blank" href="https://instagram.com/tmo.codes"><i
                        class="fab fa-instagram fa-2x"></i></a></div>
            <div class='footer-text nc'><a target="_blank" href="https://github.com/moratyle"><i
                        class="fab fa-github fa-2x"></i></a></div>
            <div class='footer-text nc'><a target="_blank" href="https://medium.com/@moratyle"><i
                        class="fab fa-medium fa-2x"></i></a></div>
        </div>
    </div>

</body>

</html>

Solution

  • You need to change minmax from 400px to 100% in your media queries when you get to 475px.

    .intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    grid-auto-rows: auto;
    grid-gap: 40px;
}

    You may also want to resize the profile image as it's pretty huge. I'd say to about 550px wide.