Background image/h1/h3 not responsive
Question
I made this website (it's not finished yet of course) but I've got a problem with making what's already done responsive :(
Background image is sizing with h1 and h3 but it does not look good and also it goes under menu.
Does anyone got any advice on how to make it responsive? And make it look better on smaller screens?
* { padding: 0; margin: 0; box-sizing: border-box; } body { font-size: 16px; } .header-main { background-image: url("https://i.stack.imgur.com/EJvoD.jpg"); background-size: contain; background-repeat: no-repeat; background-position: center; height: 90vh; width: auto; font-family: 'Monoton', cursive; } .header-main h1 { font-size: 6vw; color: rgb(253, 59, 101); display: flex; flex-flow: column nowrap; justify-content: space-between; margin-left: 1rem; } .header-main__subtitle { color: rgb(253, 59, 101); margin-right: 1rem; } .header-main__subtitle h3 { display: flex; flex-flow: row nowrap; justify-content: flex-end; } .header-main__subtitle h3 div { padding: 0.2rem; } .header-menu__items { display: flex; list-style: none; flex-flow: row wrap; justify-content: space-between; height: 10vh; } .header-menu__item { padding: 2rem; } .header-menu__item a { text-decoration: none; color: rgb(253, 59, 101); font-weight: bold; font-family: "Courier New", Courier, monospace; } .header-menu__item a:hover { border-bottom: 2px solid rgb(253, 59, 101); } @media screen and (orientation:portrait) { .header-main { height: auto; } }
<!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"> <title>Document</title> <link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="header-menu"> <nav> <ul class="header-menu__items"> <li class="header-menu__item"><a href="#">HOME</a></li> <li class="header-menu__item"><a href="#">ABOUT</a></li> <li class="header-menu__item"><a href="#">SERVICES</a></li> <li class="header-menu__item"><a href="#">INSTA</a></li> <li class="header-menu__item"><a href="#">CONTACT</a></li> <li class="header-menu__item"><a href="#">BOOK ONLINE</a></li> </ul> </nav> </div> <div class="header-main"> <div><h1><div>GODDESS</div><div>BRAIDS</div><div>SALON</div></h1></div> <div class="header-main__subtitle"><h3><div>...WHERE</div><div>HAIR</div><div>DREAMS</div><div>COME</div><div>TRUE</div></h3></div> </div> <nav> <ul> <li><a href="">fb</a></li> <li><a href="">inst</a></li> <li><a href="">twitter</a></li> </ul> </nav> </header> <main> <div> <h1>about</h1> <h2>GODDESS BRAIDS</h2> <p>I'm a paragraph. Click here to add your own text and edit me. It's easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I'm a great place for you to tell a story and let your users know a little more about you.</p> </div> <div></div> <div></div> </main> <footer> </footer> </body> </html>
background image:
1 answers
solution1
0 2018-05-20 17:58:01
The most common ways to make a website responsive are the following:
Bootstrap , which is a framework used to create general layouts for different screens-sizes.
Media queries , which is a part of CSS3 and is used to apply styling on very specific screen-sizes.
Hamburger-buttons , which the navigation hides behind, to save you a lot of space.
CSS Grid , which is a grid-based layout system, that, in combination with Media Queries, can achieve the same results as Bootstrap can, and more! (though Bootstrap is easier to use)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.