I'm working on a practice project to learn some of the core foundations of CSS, and HTML. Currently I'm having trouble getting my webpage to become responsive, with media queries, I have other projects that media queries work with, but this one in specific isn't, any solutions?
<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<title></title>
<meta name="description" content="Our first page">
<div class="box">
<img class="chung" src="chungus.png">
<h1 class="top">Cameron Marshall</h1>
</div>
<div class="container">
<div class="a">Contact Info:</div>
<div class="b">Skills:</div>
<div class="c">Objective:</div>
<div class="d">Work Experience:</div>
<div class="e"></div>
</div>
</body>
</head>
</html>
body{
margin:0;
padding:0;
height:100%;
}
.box{
background-color:lightblue;
height:350px;}
img{
height:200px;width:200px;
border-radius:50%;
border:solid 2px black;
display: block;
margin-left: auto;
margin-right: auto;
background-color:white;
position:relative;
top:20px;}
.top{
text-align:center;
font-size:4rem;
position:relative;
top:20px;}
.container{
max-width:100%;
margin-left: auto;
margin-right: auto;}
.container{
width:50%;
height:100%;
border: 8px solid black;
display:flex;
flex-wrap: wrap;
}
.a{
width:100%;
height:200px;
background-color:grey;}
.a {text-align:center;}
.b{
width:50%;
height:600px;
background-color:lightgrey;}
.c{
width:50%;
height:600px;
background-color:lightgrey
;}
.d{
width:100%;
height:400px;
background-color:white;}
.e{
width:100%;
height:200px;
background-color:grey;}
#media screen and(max-width:500px){
h1{color:blue;}}
***I'm attempting to just change the color of the title text when minimized below 500 px, I cant seem to get any media queries to work even with a basic design. ***
Turns out to be a missing blank space here:
#media screen and (max-width:500px) {
^
You had:
#media screen and(max-width:500px) {
Notice no space between and(.
Sometimes it's the little things...
body {
margin: 0;
padding: 0;
height: 100%;
}
.box {
background-color: lightblue;
height: 350px;
}
img {
height: 200px;
width: 200px;
border-radius: 50%;
border: solid 2px black;
display: block;
margin-left: auto;
margin-right: auto;
background-color: white;
position: relative;
top: 20px;
}
.top {
text-align: center;
font-size: 4rem;
position: relative;
top: 20px;
}
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.container {
width: 50%;
height: 100%;
border: 8px solid black;
display: flex;
flex-wrap: wrap;
}
.a {
width: 100%;
height: 200px;
background-color: grey;
}
.a {
text-align: center;
}
.b {
width: 50%;
height: 600px;
background-color: lightgrey;
}
.c {
width: 50%;
height: 600px;
background-color: lightgrey;
}
.d {
width: 100%;
height: 400px;
background-color: white;
}
.e {
width: 100%;
height: 200px;
background-color: grey;
}
#media screen and (max-width:500px) {
h1 {
color: blue;
}
}
<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<body>
<title></title>
<meta name="description" content="Our first page">
<div class="box">
<img class="chung" src="chungus.png">
<h1 class="top">Cameron Marshall</h1>
</div>
<div class="container">
<div class="a">Contact Info:</div>
<div class="b">Skills:</div>
<div class="c">Objective:</div>
<div class="d">Work Experience:</div>
<div class="e"></div>
</div>
</body>
</head>
</html>
Related
I want to reduce the left and right padding.
The space around the flag is too much and I'd prefer that the parent div immediately surrounds the child div's
That way, I can change the border properties for the parent div but I'm not able to reduce the size of the padding around the 'flag'
.flex {
display: flex;
border-color: black;
border: 5px;
border-style: dashed;
flex-direction: row;
justify-content: center;
padding: 0;
}
.box1 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 40px 0 0 40px;
}
.box2 {
height: 200px;
width: 100px;
background-color: whitesmoke;
}
.box3 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 0 40px 40px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nigerian-flag.css">
<title>nigerian flag</title>
</head>
<body>
<div class="flex">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
It is possible to do that by simply changing display: flex; to display: inline-flex;. Centering the flag can then be done if needed.
.flex {
display: inline-flex;
border-color: black;
border: 5px;
border-style: dashed;
flex-direction: row;
justify-content: center;
padding: 0;
}
.box1 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 40px 0 0 40px;
}
.box2 {
height: 200px;
width: 100px;
background-color: whitesmoke;
}
.box3 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 0 40px 40px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nigerian-flag.css">
<title>Nigerian flag</title>
</head>
<body>
<div class="flex">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
you can add to the flex class style, you can change the width if you want
.flex{ width: 50%; margin: 0 auto;}
Since your flag has a total width of 300px you can easily add "width:300px;" in ".flex"
.flex {
display: flex;
border-color: black;
border: 5px;
border-style: dashed;
flex-direction: row;
justify-content: center;
padding: 0;
width: 300px;
}
.box1 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 40px 0 0 40px;
}
.box2 {
height: 200px;
width: 100px;
background-color: whitesmoke;
}
.box3 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 0 40px 40px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nigerian-flag.css">
<title>nigerian flag</title>
</head>
<body>
<div class="flex">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
I can draw such inner rectanges inside fixed size rectange but these are not responsive.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test div dimension</title>
<style>
#main {
width: 640px;
height: 360px;
border: 1px solid black;
}
#content {
width: 100%;
}
#slide {
border: 1px solid red;
width: calc(640*0.75px);
height: calc(360*0.75px);
float: right;
}
#camera {
border: 1px solid red;
width: calc(640 * 0.25px);
height: calc(360 * 0.25px);
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="slide">
Rectange 1
</div>
<div id="camera">
Rectange 2
</div>
</div>
</div>
</body>
</html>
How can I create such responsive inner rectanlges inside fixed size rectangle?
height: 100%; is also required in #content
#content {
width: 100%;
height: 100%;
}
#slide {
border: 1px solid red;
width: 75%;
height: 75%;
float: right;
}
#camera {
border: 1px solid red;
width: 25%;
height: 25%;
float: left;
}
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I am trying to make two divs one div takes up 1/3 of the page and the other takes up 2/3 of the page but when I use float:left and float:right the div on the right has a strange gap above it. I am trying to make the width 1440px for now and transform it the percentage later. Does anyone know why it's doing this?
HTML:
main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 80px;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:400px;
}
.height2{
height: 300px;
}
.height3{
height:420px;
}
.column1{
width: 480px;
background-color: #000;
}
.column2{
width: 960px;
background-color: coral;
}
.float-left{
float:left;
}
.float-right{
float: right;
}
.red{
background-color: #d11242;
}
.blue{
background-color: #00447c;
}
.gray{
background-color: #717073;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
<link href="CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<header>
<nav class="float-right">
</nav>
</header>
<div class="height1 row1 red">
<div class="height1 column1 float-left"></div>
<div class="height1 column2 float-right"></div>
</div>
<div class="height2 row1 blue"></div>
<div class="height3 row1 gray"></div>
</main>
</body>
</html>
Your header nav element is causing the displacement.
Check your nav styles and remove either the margin or the fixed height. Another option would be to change the height to 100% and remove the margin and use padding with a box-sizing change.
<main>
<header>
<nav class="float-right">
</nav>
</header>
<div class="height1 row1 red content-wrapper">
<div class="height1 column1 float-left"></div>
<div class="height1 column2 float-right"></div>
</div>
<div class="height2 row1 blue"></div>
<div class="height3 row1 gray"></div>
</main>
main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 80px;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:400px;
}
.height2{
height: 300px;
}
.height3{
height:420px;
}
.column1{
width: 480px;
background-color: #000;
}
.column2{
width: 960px;
background-color: coral;
}
.float-left{
float:left;
}
.float-right{
float: right;
}
.red{
background-color: #d11242;
}
.blue{
background-color: #00447c;
}
.gray{
background-color: #717073;
}
.content-wrapper{
position: relative;
display: block;
width: 100%;
background: red;
overflow: hidden;
}
I guess the problem is with your height pixels. You should not give height as pixels. Instead of pixels try using in %. I have made some changes in CSS, can try that.
main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 30%;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:100%;
}
.column1{
width: 480px;
background-color: #000;
}
.column2{
width: 960px;
background-color: coral;
}
.float-left{
float:left;
}
.float-right{
float: right;
}
.red{
background-color: #d11242;
}
.blue{
background-color: #00447c;
}
.gray{
background-color: #717073;
}
Can you please check the below code link? Hope it will work for you. This issue occurs as you have given fixed height in header and more margin to nav so, nav overflows outside of the header.
Please refer to this link: https://jsfiddle.net/yudizsolutions/8gxLu2mn/1/
main {
width: 1440px;
margin: 0px auto;
float: left;
}
header {
height: 80px;
background-color: cadetblue;
}
nav {
background-color: darkslategray;
height: 50px;
margin: 15px;
width: 200px;
}
.row1 {
margin: 0px auto;
}
.height1 {
height: 400px;
}
.height2 {
height: 300px;
}
.height3 {
height: 420px;
}
.column1 {
width: 480px;
background-color: #000;
}
.column2 {
width: 960px;
background-color: coral;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.red {
background-color: #d11242;
}
.blue {
background-color: #00447c;
}
.gray {
background-color: #717073;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
<link href="CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<header>
<nav class="float-right">
</nav>
</header>
<div class="height1 row1 red">
<div class="height1 column1 float-left"></div>
<div class="height1 column2 float-right"></div>
</div>
<div class="height2 row1 blue"></div>
<div class="height3 row1 gray"></div>
</main>
</body>
</html>
I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
i was trying to add multiple box inside another but i am not getting as i want please help!why i am getting line only?i added display and overflow attributes still i am getting so
style.css
#charset "utf-8";
body {
margin:0;
padding:0;
background:url(../images/back1.png);
background-repeat:repeat;
}
.logomainbox {
width: 100%;
height: 50px;
margin: 10px;
background: linear-gradient(#FC8E03, #FF9801);
}
.menubar {
width: 100%;
height: 50px;
margin: 10px;
background: linear-gradient(#DADADA,#C8C6C6);
}
.imageslide {
width: 100%;
height: 275px;
margin: 10px;
background: linear-gradient(#FC8E03, #FF9801);
}
.textdiscription {
width: 60%;
height: 400px;
margin-left:20%;
margin-right:20%;
border:3px solid red;
}
.textare {
width: 100%;
height: 100px;
border: 1px solid blue;
}
.box {
height: 250px;
wedith: 30%;
border: 1px solid green;
display:inline-block;
overflow:auto;
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css">
<title>Home</title>
</head>
<body>
<div class="logomainbox">
</div>
<div class="menubar">
</div>
<div class="imageslide">
</div>
<div class="textdiscription">
<div class="textare">
</div>
<center>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</center>
</div>
</body>
</html>
what i want
what i am getting
The problem is that you have wedith instead of width. Change your code to:
.box {
height:250px;
width:30%;
border: 1px solid green;
display:inline-block;
overflow:auto;
}
You have a spelling issue,
.box
wedith:30%