I'm using max-width and width to make my website responsive to window size.
My content div is not downsizing when the website is made smaller.
The content is told that its max width is 800px, and its set to be 100%.
However its not downsizing when outercontainer does.
Any thoughts?
#charset "utf-8";
/* CSS Document */
#font-face {
font-family: 'Bebas';
src: url(Website%20Specific%20Resources/BEBAS.TTF)
}
body {
background-image:url(Website%20Specific%20Resources/Background.png);
max-width:1920px;
width:100%;
margin: auto;
}
.outercontainer{
height:100%;
max-width:1920px;
width:100%
}
.container {
max-width:960px;
width:100%;
max-height:300px;
height:100%;
margin-top: 100px;
margin:auto;
}
.header {
background-image:url(Website%20Specific%20Resources/New_Banner_.png);
max-height: 300px;
max-width: 1920px;
width: 100%;
height: 100%;
top: 0;
position: fixed;
z-index:5;
}
A {
text-decoration:none;
font-family: "bebas";
color: #fff;
}
li {
z-index:2;
list-style:none;
float:left;
padding-right:50px;
margin-left:25px;
padding-top:15px;
font-size:24px;
}
.nav {
z-index:2;
position: absolute;
}
.content {
font-family: "bebas";
max-width: 800px;
width: 100%;
height: 100%;
margin: auto;
background-color: #009999;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="outercontainer">
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>Home </li>
<li>About Us </li>
<li>Products </li>
<li>Gallery </li>
<li>Contact Us </li>
</ul>
</div>
</div>
</div>
<div class="content" >
<p>asdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>asdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasda</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>sdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</body>
</html>
so far i can see it's resizing well in chrome. however i think you forgot to add the meta tag for responsive layout <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ur content is responsive. Since you are not giving space b/w letters that why it is not coming down. Add some space and check it out
<p>sdasdafasdasda sdasdafasdasdasdasdafa sdasdasdasdafas dasdasdasdafasd asdasdasdaf</p>
If you want break the word even without space. U can add the following one
word-wrap: break-word;
Solution: Apply Word-Wrap to your paragraph
Word-wrap:
Usage:
Allow long words to be able to break and wrap onto the next line:
Implementation:
p {
word-wrap: break-word;
}
Working Fiddle: https://jsfiddle.net/rittamdebnath/uy2r6jh7/
Related
In this flexbox skeleton, I have the .body that is containing 3 rows.
The .main row (blue) contains a content that will always overflow.
I want to keep scroll in body (like it is now), but I want also that the 3 rows including (.main) grow and fill all the .body(green) section.
So my problem, when the body overflow correctly, its children doesn't stretch with it.
You can have the code directly here:
https://jsfiddle.net/garalimedkarim/5khms9Lx/16/
Html
<div class="container">
<div class="header">
Header
</div>
<div class="body">
<div class="left-sidebar"></div>
<div class="main">
<div class="content">
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
<p> Karim </p>
</div>
</div>
<div class="right-sidebar"></div>
</div>
</div>
css:
html,
body {
margin: 0;
background-color: red;
}
.container {
background-color: cyan;
height: 20rem;
display: flex;
flex-flow: column nowrap;
}
.header {
flex: 0 0 2rem;
background-color: bisque;
}
.body {
background-color: green;
flex: 1;
overflow: auto;
display: flex;
flex-flow: row nowrap;
}
.left-sidebar {
background-color: blueviolet;
flex: 0 0 25%;
}
.main {
background-color: blue;
flex: 0 0 50%;
}
.right-sidebar {
background-color: black;
flex: 0 0 25%;
}
Flex is kinda funky when you're managing sizing in 2D
Grid is better for that
.body {
background-color: green;
flex: 1;
overflow: auto;
display: grid;
grid-template-columns: 0.25fr 0.5fr 0.25fr;
}
I was trying to make my code side by side but it seems like the odds aren't in my favor with this. I'm having trouble with making them side by side. Here is the code that I use:
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
</div>
When I try it live, it only appears to be on the bottom of the number and not on the side of the text. I tried making it as a 6 column layout but it looked terrible than this one, I also tried adding a floating box but it didn't work as well.
Here is what I am trying to achieve: what I'm trying to achieve
Am I missing anything? Thanks a lot in advance.
With a little help from CSS flexbox, relative units, and a liittle more structure to the HTML, you can get your desired result:
.columns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100vw;
margin: auto;
}
.column {
display: flex;
flex-direction: row;
align-items: center;
}
.big-num {
font-size: 10vw;
}
.text-container {
line-height: 0;
margin-left: 2.5vw;
}
.text {
font-size: 1.75vw;
}
<!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="index.css">
</head>
<body>
<div class="columns">
<div class="column" >
<h2 class="big-num">5</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
<div class="column">
<h2 class="big-num">40</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
<div class="column">
<h2 class="big-num">90</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</body>
</html>
Add in the rest of your styles as you see fit. But it's best practice to use a separate css file and have all your styles included there instead of placing them on each HTML element.
I created a parent Div with 3 children Div's within it. I want each of the 3 Divs to be on the same column, but on the centre of the screen with 10px separating the border from each other, while still maintaining the 3 boxes centred on the screen together.
I have a very basic grasp on CSS3
#prices {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
#tenor {
justify-self: end;
}
#bass {
justify-self: center;
<!-- Beginning of HTML5 Code -->
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
With the code above, everything is centered perfectly, but there are huge gaps between each of the 3 boxes. How do I remove the gaps, but make sure its still centered relative to the screen?
Thank you in advance.
You can use the CSS flex property to achieve this
JSFiddle
<html>
<head>
<style>
#prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
</style>
<body>
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
</body>
</head>
</html>
Try this one your using margin: 10px; these three #tenor, #bass, #valvet ids. If you don't want the gap between the grid columns you have to use margin: 10px 0; in these three #tenor, #bass, #valvet ids.
#prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px 0;
}
<html>
<head>
<body>
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
</body>
</head>
</html>
For a child div if I provide position fixed, it is positioning itself relative to the parent div. As per my understanding, a fixed positioned element is taken out of the flow so that it is relative to the viewport.
My question is why child div is coming inside main div?
Below is my code.
#main {
margin-left : 30px;
background-color : red;
width : 100px;
height : 100px
}
#child {
position : fixed;
background-color : yellow;
width : 50px;
height : 50px;
}
<div id="main">
<div id="child">Child Div</div>
</div>
It's not. It just looks that way. Set the top property to 0 and you'll see it sticks to the top of the viewport. You just didn't move it anywhere.
#main {
margin-left : 30px;
background-color : red;
width : 100px;
height : 100px
}
#child {
position : fixed;
background-color : yellow;
width : 50px;
height : 50px;
top:0;
}
<div id="main">
<div id="child">Child Div</div>
</div>
Another way to see that it's actually fixed would be to add enough content after it so that you can scroll down and see that it is indeed fixed.
#main {
margin-left: 30px;
background-color: red;
width: 100px;
height: 100px
}
#child {
position: fixed;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id="main">
<div id="child">Child Div</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
I have a container which has my header, nav, sidebar and article inside. When the contents of the article go past the fold, there is either padding or margin being added to the left of the container. It's clear when you change between pages where the content goes past the fold, and pages where it doesn't, as the container jolts to the right.
HTML
<div id="container">
<header>
Blog
</header>
<nav>
<ul>
<li>Home</li>
<li>New post</li>
<li>About</li>
</ul>
</nav>
<aside>
<form id="newsletter">
<h2 label for="newsemail">Newsletter signup</h2 label>
<input type="email" name="newsemail" placeholder="Enter email..." required>
<button type="submit" class=submitbutton>Submit</button>
</form>
</aside>
<article>
<section><h1>Post 1</h1>
Lorem ipsum dolor sit amet
<br>
<span class="commentlink">
View comments
</span>
<hr>
</section>
<section>
<h1>Post 2</h1>
Lorem ipsum dolor sit amet
<br>
<span class="commentlink">
View comments
</span>
<hr>
</section>
<section>
<h1>Post 3</h1>
Lorem ipsum dolor sit amet
<br>
<span class="commentlink">
View comments
</span>
<hr>
</section>
</article>
CSS
header, footer, nav, article, aside{ display: block; }
#container{ border-radius: 20px; background-color:#97C02F; padding:10px 50px 30px 50px; margin:0px auto; width:880px;
overflow:auto; }
aside{ float:left; width:150px; padding-right:15px; color:red;
margin-top:15px; }
article{ float:left; width:660px; margin-left:20px; }
section{ font-family: 'Droid Sans', sans-serif; color:#FFFFFF;
font-size:15px; font-weight:normal; }
I haven't inserted all of my code, but think I've put the necessary bits in.
You can use html { overflow-y:scroll } to force a scrollbar, even if the content doesn't need scrolled, so this jumping doesn't occur.
HTML syntax that can be used in your CSS class to handle any exceeding in your container or div; etc.
This code give you an access to a scrollbar when it is necessary.
.of{overflow:auto}