Help with my first project - CSS

HTML-CSS
1

Hello, everybody! My first post here! I’m still working on my first project. I’m working to make it responsive, but I’m having some issues.

I have a row of images that I want do display.

And on small screens I would like to display it with horizontal overflow, but the first picture is not showing and the second is cut in half:

image
image503×940 142 KB

I tried to use padding, but I would have to set it to every size of screen possible, or it have different spaces in each size of screen.

I already added “overflow-x” and tried to set a max-width, but it still cuts the first photos.

I would like to get some idea from you! Thank you all!

I’ll paste my code if it helps.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,200;1,300;1,400&display=swap');

* {
    background-color: #F2F1DD;
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

::selection {
    background-color: #009576;
    color: white;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
}

a {
    text-decoration: none;
}

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 6vh;
    padding: 10px;
    width: 100%;
}

nav .responsivenav i {
    color: #FF79CD;
    cursor: pointer;
    display: none;
}

.logo {
    color: #009576;
    font-size: 40px;        
    line-height: normal;
    text-transform: uppercase;
    width: 100%;
    font-family: "Oswald", sans-serif;;
    font-style: normal;
    font-weight: 600; 
}

.navlist {
    list-style: none;
    display: flex;
}

.navlist li {
    color: #FF79CD;
    font-size: 27px;
    font-family: 'Lora';
    font-weight: 700;
    display: inline-block;
    margin-left:20px;
}

li a {
    color: #FF79CD;
}

a:visited, a:active {
    text-decoration: none;
    color: none;
}

#header {
    width: 100%;
    position: relative;
    margin-bottom: 0;
}

#header img {
    background-image: url(fotoheader.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    width: 100%;
    background-position: center;
}

.ribbon {
    display: flex;
    width: 100%;
    height: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FF79CD;
    position: relative;
    margin-top: -5px;
    margin-bottom: 70px;
}

.ribbon span {
    color: #FFF;
    text-align: center;
    font-family: Outfit;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: lowercase;
    background-color: #FF79CD;
}

.collection_container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    height: auto;
    position: relative;
    align-content: center;
    height: auto;
    align-items: center;
    margin-bottom: 70px;
}

.collection_container img {
    background-repeat: no-repeat;
    background-size: cover;
    max-width:170px;
    max-height:230px;
    width: auto;
    height: auto;
    margin-right: 5px;
    transition-duration: 0.7s;
    border: 3px solid #83B6B2;
}

.collection_container:hover img {
    filter: grayscale(100%);
}

.collection_container img:not(:hover) {
    filter: grayscale(0%);
}

.main_container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    height: auto;
    position: relative;
    align-content: center;
    height: auto;
    align-items: center;
    margin-bottom: 70px;
}


.container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 70px;
}

.container2 {
    display: flex;
    width: 100%;
    height: 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
    margin-bottom: 70px;
}

h1 {
    color: #009576;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    font-size: 65px;
    line-height: normal;
}

.title {
    color: #FF79CD;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    font-size: 50px;
    line-height: normal;
}

.title2 {
    color: #009576;
    text-align: center;
    font-size: 50px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    line-height: normal;
}

.about {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: auto;
}

.about p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 2;
}

.about2 {
    display: flex;
    flex-direction: column;
    width: 65%;
}

.about2 p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: right;
    line-height: 2;
}

.stores {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin-bottom: 70px;
    padding-top: 70px;
}

.stores p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    line-height: 1.5;
}

.stores_title {
    color: #FF79CD;
    font-family: Outfit;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input {
    padding: 5px;
    margin: 10px 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.06);
    font-family: Outfit, sans-serif;
    font-size: 15px;
    border: 2px solid #009576;
    transition: .3s border-color;
    display: block;
    color: #6A6A6A;
    border-radius: 5px;
}

input:hover, textarea:hover {
    border: 2px solid #006d57;
}

input:focus, textarea:focus {
    outline: none;
}

textarea {
    width:100%;
    resize: vertical;
    padding: 5px;
    margin: 10px 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.06);
    max-height: 80px;
    font-family: Outfit, sans-serif;
    font-size: 15px;
    border: 2px solid #009576;
    transition: .3s border-color;
    color: #6A6A6A;
    border-radius: 5px;
    max-width: 400px;
    display: block;
  }

.form_label {
    color: #fff;
    font-family: Outfit;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    text-align: right;
    line-height: 1.7;
    letter-spacing: 1.2;
}

button {
    min-width: 70px;
    height: 30px;
    color: #fff;
    font-family: Outfit;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border-radius: 5px;
    border: none;
    background-color: #009576 !important;
    margin-top: 10px;
    float: right;
}

button:hover {
    background-color: #006d57 !important;
}

button:active {
    top: 2px;
}

.form_title {
    color: #fff;
    text-align: center;
    font-size: 40px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    line-height: normal;
    margin-bottom: 10px;
}

.copyright_container {
    max-width: 50%;
}

.footer_container * {
    background-color: #83B6B2;
}

.footer_container {
    background-color: #83B6B2;
    padding: 70px 0 100px 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    width: 100%;
    height: auto;
    position: relative;
    align-content: center;
    height: auto;
    align-items: center;
}

.footer_container p {
    color: #fff;
    font-family: Outfit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 2;
}

.show_responsive {
    display: none;
}

@media (max-width: 767px) {
    
    nav .responsivenav i{
        display: block;
    }
    nav ul {
        position: fixed;
        top: 555px;
        right: -100%;
        background-color: #009576;
        height: 100vh;
        width: 100%;
        text-align: center;
        display: block;
        transition: all 0.3s ease;
        z-index: 1;
        opacity: 0.9;
    }

    nav ul * {
        background-color: #009576;
    }

    nav ul.open {
        right: 0;
    }

    nav ul li{
        width: 100%;
        margin: 20px 0;
        background-color: transparent;
    }
    nav ul li a {
        font-size: 23px;
        color: #fff;
        transition: all 0.3s ease;
    }
    nav ul li a.active,
    nav ul li a:hover{
        background: none;
        color: #E50592;
    }   

    .navlist {
        flex-direction: column;
    }

    h1 {
        font-size: 45px;
    }

    .container, .container2, .main_container, .collection_container, .ribbon {
        margin-bottom: 40px;
    }

    .ribbon span {
        font-size: 13px;
        font-weight: normal;
        padding: 5px 10px;
    }

    .about {
        margin-bottom: 30px;
    }

    .about p, .about2 p {
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
    }

    .title, .title2 {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .collection_container {
        display: inline-flex;
        max-width: 840px;
        overflow-x: scroll;
        margin: 0;
        padding: 0;
    }

    .collection_container img {
        max-width: 120px;
        max-height: 180px;
    }

    .main_container {
        flex-direction: column;
    }

    .show_responsive {
        display: block;
    }

    .hide_responsive {
        display: none;
    }

    .stores {
        margin-bottom: 30px;
        padding-top: 0;
    }

    .footer_container {
        flex-direction: column;
        padding: 60px 0;
    }

    .footer_container p {
        font-size: 13px;
        font-weight: normal;
    }

    button {
        margin-bottom: 20px;
    }

    .logo {
        font-size: 16px;
    }

    .copyright_container {
        margin: 30px 0;
        padding: 10px 0;
    }

}

@media (min-width: 768px) and (max-width: 1200px) {

    h1 {
        font-size: 55px;
    }

    .container, .container2, .main_container, .collection_container, .ribbon {
        margin-bottom: 40px;
    }

    .ribbon span {
        font-size: 16px;
        font-weight: normal;
        padding: 5px 10px;
    }

    .about {
        margin-bottom: 30px;
    }

    .about p, .about2 p {
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
    }

    .title, .title2 {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .collection_container {
        max-width: 100%;
        width: 100%;
        margin-right: 0;
    }

    .collection_container img {
        max-width: 120px;
        max-height: 180px;
    }

    .main_container {
        flex-direction: column;
    }

    .show_responsive {
        display: block;
        margin-top: 40px;
    }

    .hide_responsive {
        display: none;
    }

    .stores {
        margin-bottom: 30px;
        max-width: 150px;
        padding: 20px 0 0;
    }

    .store_responsive {
        flex-direction: row;
    }

    .footer_container {
        flex-direction: column;
        padding: 60px 0;
    }

    .footer_container p {
        font-size: 13px;
        font-weight: normal;
    }

    .logo {
        font-size: 16px;
    }

    .copyright_container {
        margin: 40px 0;
        padding: 20px 0;
    }
}

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunglass Brand</title>
    <link rel="stylesheet" href="sheet.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header>
        <a class="logo" href="/">Sunglasses Brand</a>
        <nav>
        <div class="responsivenav">
            <i class="fa fa-bars fa-2x" onclick="toggleMenu()"></i>
        </div>
            <ul class="navlist">
                <li><a href="/" id="home">home</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#glasses">collection</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="header">
            <img src="fotoheader.png">
        </div>
        <div class="ribbon"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consequat arcu quis sem pulvinar gravida.</span>
        </div>
        <div class="container">
            <h1>SUNGLASSESS BRAND</h1>
        </div>
        <div class="container">
        <div class="about">
            <p>At our sunglasses brand, the sun never sets on style. By blending the highest quality materials with innovative design, our sunglasses not only shield your eyes from UV rays but also elevate your look to new heights of elegance and sophistication. From beachside to cityscape, from dawn till dusk, our sunglasses are more than just an accessory—they're a statement of timeless style and unmatched confidence.</p>
        </div>
        </div>
        <div class="container2" id="glasses">
            <p class="title">check out our collection:</p>
        </div>
        <div class="collection_container">
            <img src="foto1.png">
            <img src="foto2.png">
            <img src="foto3.png">
            <img src="foto4.png">
            <img src="foto5.png">
            <img src="foto6.png">
            <img src="foto7.png">
        </div>
    </main>
    <div class="main_container">
        <div class="title2" id="about">
            <p>
                about our brand
            </p>
        </div>
        <div class="about2">
            <p>
                We are passionate creators at the forefront of fashion, dedicated to crafting sunglasses that transcend trends and embody individuality. With a commitment to excellence and a relentless pursuit of innovation, we strive to redefine what it means to accessorize with sunglasses. Our journey is driven by a deep-rooted desire to inspire confidence and empower self-expression in every wearer. From our inception, we've embraced the ethos of authenticity, sustainability, and inclusivity, ensuring that our brand resonates with people from all walks of life. Welcome to our world, where every pair of sunglasses tells a unique story of style, adventure, and endless possibilities.
            </p>
        </div>
    </div>
    <div class="title show_responsive">
        <p>
            where you can
        </p>
        <p>
           find your pair
        </p>
    </div>
    <div class="main_container store_responsive">
        <div class="stores">
            <div class="stores_title">store 1:</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit cursus urna, vel consequat metus.
            </p>
        </div>
        <div class="stores">
            <div class="stores_title">store 2:</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit cursus urna, vel consequat metus.
            </p>
        </div>
        <div class="stores">
            <div class="stores_title">store 3:</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit cursus urna, vel consequat metus.
            </p>
        </div>
        <div class="title hide_responsive">
            where you can<br>find your pair
        
        </div>
    </div>
    <footer>
        <div class="footer_container" id="contact">
        <form>
            <div class="form_title">get in touch:</div>
            <div>
                <label for="name" class="form_label">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div>
                <label for="email" class="form_label">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div>
                <label for="message" class="form_label">Message:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit">Send</button>
        </form>
            <div class="copyright_container">
                <p>Webdesign project by Bianca Louise Wagner. This is not a real store. There are no items/products being sold. Project made specifically to be added to the portfolio. <br>© Copyright 2024</p></div>
    </footer>
    <script src="script.js"></script>
    </body>
</html>
2

Could you create a CodePen file and send us link to it? Thanks.

1 Like
3

Sure! Here it is: https://codepen.io/biancawagner/pen/KKYPmLp.

I tried to upload on a picture host site the photos but I looks broken to me, not really sure what to do to fix it.

4

Hi there. Right-click on the image on the site you uploaded the pictures to, and then hit “Copy Image link”. For this particular host, you should get something “https://iili.io/JGZXTGV.md.png”. That’s the image file you’re looking for.

The thing about img elements is the source has to be one hundred percent recognizable as an image. Not a website that has an image on it.

1 Like
5

Oh, yes, of course! I makes sense, I didn’t even stop to look if it was a png file. Thank you so much! I fixed everything on CodePen! :blush:

6

The justify-content: space-evenly style on the flex container will cause that. You can change it to start (or use unset) in a media query.

1 Like
7

It worked! Thank you so much! I was trying everything and didn’t work, I really appreciate it!

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.