Mobile Responsiveness

HTML-CSS
1

https://gavinescanilla.github.io/brewingtempest/
im having trouble fixing white space on the top of the navbar. I also having problem putting the home button in the bottom center and left it next to my h1 and paragraph bc it display is set to flex row. when i resize the resolution to a smaller res like phone res, even though i put flex wrapp my buttons and text is gone or part of the text didnt wrap how i wanted it to? i been getting frustrated with this issue, i also didnt know how i should i put in if put all the code here or just to put in the link

also on my pc everything looks fine, but on my phone the img looks like its overflow over home div on the bottom

IMG_8067
IMG_80671284×2778 188 KB

IMG_8068
IMG_80681920×2560 209 KB

1 Like
2

Hello Gavin.
Have you tried using a media query?

3 Likes
3

yes but now i have this problem

IMG_8069
IMG_80691284×2778 185 KB

IMG_8070
IMG_80701920×2560 225 KB

mobile the text isnt where i want it to be and my buttons are columned not row

4

Ok. Post your full code here, so that we work it out.

1 Like
5

up date i was able to put my buttons in rows now by wrapping it in a div now i just need to figure out how to put buttons on the bottom in a pc like res

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>brewingtempest</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <nav class="navbar" id="navbar">
        <h2 id="navtitle">brewingtempest</h2>
<ol>
<li class="navlinks">COLLECTIONS</li>
<li class="navlinks">EDITORIAL</li>
<li class="navlinks"><a href="#home">ABOUT</a></li>
</ol>

    </nav>
    <div class="home" id="home">
<img src='IMG_7336.png' id="home-img"/>
<div class="hometext">
    <h1  id="homeh1">BrewingTempest</h1>
<p  id="homep">From cozy sweaters to the cutest wrap dresses, the collection has all of your chic and feminine favorites.fff</p>
</div>
<div id="home-butonwrap">
    <div id="homepage1" class="home-button" onclick="homebtn1()"></div>
    <div id="homepage2" class="home-button" onclick="homebtn2()"></div>
    <div id="homepage3" class="home-button" onclick="homebtn3()"></div>
</div>
</div>

       <div id="collections">
 <h2 id="collection-h2">COLLECTIONS</h2>


       </div>
    <script src="script.js"></script>
</body>
</html>

window.addEventListener('scroll', function() {
    let navbar = document.getElementById('navbar');
    let scrollPosition = window.scrollY;

    if (scrollPosition > 0) {
        navbar.classList.add('with-border');
    } else {
        navbar.classList.remove('with-border');
    }
});


const homebtn1 = () => {
    const homebutton1 = document.getElementById('homepage1');
    const homebutton2 = document.getElementById('homepage2');
    const homebutton3 = document.getElementById('homepage3');
    const homeimg = document.getElementById('home-img');
    const homeh1 = document.getElementById('homeh1');
    const homep = document.getElementById('homep');
     homeh1.textContent = "BrewingTempest";
     homep.textContent = 'From cozy sweaters to the cutest wrap dresses, the collection has all of your chic and feminine favorites.fff';
     homeimg.src="IMG_7336.png";
     homebutton1.style.backgroundColor = 'black';
     homebutton2.style.backgroundColor = 'transparent';
     homebutton3.style.backgroundColor = 'transparent';

    }
    const homebtn2 = () => {
        const homebutton1 = document.getElementById('homepage1');
        const homebutton2 = document.getElementById('homepage2');
        const homebutton3 = document.getElementById('homepage3');
        const homeimg = document.getElementById('home-img');
        const homeh1 = document.getElementById('homeh1');
        const homep = document.getElementById('homep');
         homeh1.textContent = "Little  Co. Email is Here!";
         homep.textContent = 'From first looks at new collections to reminders about our sales,sign up now to stay in-the-know on all things Lttle Co.';
         homeimg.src="1280_lauren-1.webp";
         homebutton1.style.backgroundColor = 'transparent';
         homebutton2.style.backgroundColor = 'black';
         homebutton3.style.backgroundColor = 'transparent';
    
        }
        const homebtn3 = () => {
            const homebutton1 = document.getElementById('homepage1');
            const homebutton2 = document.getElementById('homepage2');
            const homebutton3 = document.getElementById('homepage3');
            const homeimg = document.getElementById('home-img');
            const homeh1 = document.getElementById('homeh1');
            const homep = document.getElementById('homep');
             homeh1.textContent = "Shop Little Co. by Lauren Conrad";
             homep.textContent = 'Shop the sweetest styles for baby, toddler, and big kids from Little Co. by Lauren Conrad';
             homeimg.src="Homepage_1280.webp";
             homebutton1.style.backgroundColor = 'transparent';
             homebutton2.style.backgroundColor = 'transparent';
             homebutton3.style.backgroundColor = 'black';
        
            }

body{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 ;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-wrap: break-word;
}
nav{
    display: flex;
    flex-direction: row;
    position: fixed;
    background-color: transparent;
    border-bottom: 1px solid black;
    align-items: flex-end;
    width: 100vw;
    z-index: 100;
    justify-content: space-between;
}
nav.with-border {
    border-bottom: none; 
}
#navtitle {
    margin-left: 90px;
}
nav > ol{
    display: flex;
     flex-direction: row; 
    list-style: none;
}
 li{
    justify-content: space-between;;
    margin-right: 50px;
 }

.home{
    display:flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    background-color: burlywood;
    width: 100%;
    height: 100%; 
    align-items: center; 
} 

#home-img {
    margin: 0;
    padding: 0;
    width: 50%;
    height: 100%;
    float: left;
}
.hometext{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    height: fit-content;
    text-align: center;
    
}
#home-butonwrap{
    display: flex;
}
#collections{
 display: flex;
 flex-direction: column;
 text-align: center;
}
a{
    text-decoration: none;
    color:black
}
.home-button{
    display: flex;
    flex-direction: row;
     border: 1px solid black;
     border-radius: 100%;
     aspect-ratio: 1 / 1; 
     height: 10px;
     width:20px;
     

}
#homepage1{
    background-color: black;
}
#homepage2{
    background-color: transparent;
}
#homepage3{
    background-color: transparent;
}

@media (max-width: 600px) {
    nav > ol {
        flex-direction: column;
    }
}
@media screen and (max-width: 450px) {
    .home {
     flex-direction: column;
    }
    #home-img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        
  }
  .home-button{
    display: inline-flex;
    flex-direction: row ;
     aspect-ratio: 1 / 1; 
     height: 10px;
     width:20px;
    
}
}
6

new css

body{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 ;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-wrap: break-word;
}
nav{
    display: flex;
    flex-direction: row;
    position: fixed;
    background-color: transparent;
    border-bottom: 1px solid black;
    align-items: flex-end;
    width: 100vw;
    z-index: 100;
    justify-content: space-between;
}
nav.with-border {
    border-bottom: none; 
}
#navtitle {
    margin-left: 90px;
}
nav > ol{
    display: flex;
     flex-direction: row; 
    list-style: none;
}
 li{
    justify-content: space-between;;
    margin-right: 50px;
 }

.home{
    display:flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    background-color: burlywood;
    width: 100%;
    height: 100%; 
    align-items: center;
} 

#home-img {
    margin: 0;
    padding: 0;
    width: 50%;
    height: 100%;
    float: left;
}
.hometext{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    height: fit-content;
    text-align: center;
    
}
#home-butonwrap{
    display: flex;
    flex-direction: row;
    position: relative;
    top: 48%;
    right: 45%;
}
#collections{
 display: flex;
 flex-direction: column;
 text-align: center;
}
a{
    text-decoration: none;
    color:black
}
.home-button{
    display: inline-flex;
    flex-direction: column;
     border: 1px solid black;
     border-radius: 100%;
     aspect-ratio: 1/1;
     height: 20px;
     width:20px;
     margin-right: 10px;
}
#homepage1{
    background-color: black;
}
#homepage2{
    background-color: transparent;
}
#homepage3{
    background-color: transparent;
}
@media (max-width: 600px) {
    nav > ol {
        flex-direction: column;
    }
}
@media screen and (max-width: 450px) {
    .home {
     flex-direction: column;
    }
    #home-img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        
  }
  .home-button{
    display: inline-flex;
    flex-direction: row ;
     aspect-ratio: 1 / 1; 
     height: 20px;
     width:20px;
    
}
#home-butonwrap{
    display: flex;
    flex-direction: row;
    position: static;
}
}
7

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