Sidebar not collapsing on smaller screens - html

I'd like my header to expand the same width as the entire div of the container so that it is one long block. I'm using Bootstrap 4 and the "cards" which replaced the old panels.
Unfortunately, my header isn't able to do that. I've tried manipulating the margins and padding in CSS, but that hasn't worked. You can see in the picture there is a sliver of white around the edges of the header. I want the white borders around the entire div of the container to keep it offset from other content, I just want the header element to cover it up.
For convenience, I've put a small border around the header element (h2) and the div which it sits inside.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>

It looks like there's just a bit of padding around your .card-header class. Below I set the left and right padding of the class to 0. Here's a CodePen to show it working with Bootstrap 4 included.
Feel free to let me know if I missed the point completely.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {
padding-left: 0;
padding-right: 0;
}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
Edit: This padding is caused by the .card-header class included with card.scss

Related

html/ css #media change padding and margin for a smaller screen

I tried change the padding between different objects so that the content is not on top of each other. I tried changing the padding inside #media, but I see no changes.
<div class="row6">
<div class="final__tooltip top" title="Personalized Approach"
des="Teaching and learning are personal. Students and instructors feel welcomed and recognized when their needs are met in the classroom. Enabling flexible course delivery and offering a variety of technologies to accommodate different learning styles, shows instructors and students that classroom environments are tailored to their needs.">
<div class="design-col">
<img src="images/Home/Layer 2.svg">
<h3>Personalized Approach</h3>
</div>
</div>
<div class="final__tooltip top" title="Education is Accessible"
des="Designing with accessibility in mind ensures that everyone can access content in a way that meets their needs. Teaching and learning can be thought of as collaborative, consistent, and accessible no matter the department or role. Designing classroom environments that enable universal design for learning ensures that equity and access.">
<div class="design-col">
<img src="images/Home/Group-6.svg">
<h3>Education is Accessible</h3>
</div>
</div>
<div class="final__tooltip top" title="Instructor & Student Empowerment"
des="Support empowers students and instructors to adapt to new instructional environments. Empowered individuals feel comfortable and confident with venturing into new learning spaces.">
<div class="design-col">
<img src="images/Home/Group-7.svg">
<h3>Instructor & Student Empowerment</h3>
</div>
</div>
<div class="final__tooltip top" title="Recognize Emotional Stakes"
des="Individuals experience learning spaces along continuums of comfort that range from feelings of empowerment to those of discomfort. By recognizing that emotions are linked to class design and routines, solutions can be considered for a more accessible space.">
<div class="design-col">
<img src="images/Home/Group 57.svg">
<h3>Recognize Emotional States</h3>
</div>
</div>
<div class="final__tooltip top" title="Autonomy in Teaching and Learning"
des="Autonomy underscores the fact that instructors and students can meet their own needs when they have access to the right tools. Autonomy facilitates innovation and connection in learning spaces.">
<div class="design-col">
<img src="images/Home/Group-2.svg">
<h3>Autonomy in Teaching and Learning</h3>
</div>
</div>
</div>
.row6 {
display: flex;
justify-content: space-evenly;
margin-right: 40px;
margin-left: 40px;
margin-bottom: auto;
padding-bottom: 200px;
}
.design-col {
flex-basis: 40%;
margin: 5px;
background: transparent;
padding: 5px;
position: relative;
}
#media (max-width: 700px) {
.row6{
flex-direction: column;
}
}
[how it looks on the website right now][1]
[1]: https://i.stack.imgur.com/1V03S.png

If it's in a main div with margin, make a div with a width of 100vw

I'm trying to make a div with a width of 100vw to cover all viewing areas, however, it comes in a div with a margin, so I'm having trouble.
I've also included an image link below to help you understand.
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
/* About Section */
.about {
display: block;
background-color: #2e3038;
margin-left: -6rem;
margin-right: 6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
As you can see, I attempted to use margin-right, however, it would not work.
I can't use inspect element since the design I'm attempting to replicate is in png format.
You're close - you've just specified the wrong direction for margin-right:
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
.about {
background-color: #2e3038;
margin-left: -6rem;
margin-right: -6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
Full Width Containers in Limited Width Parents | CSS-Tricks

How to make bullet points aligned in list

I am doing a little exercise where I have to copy this
I am having some trouble to align the bullets like he does. My problem is that my content is aligned bot not the bullets.
Here it is
My HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" id="left-box">
<h3 class="text-center">Some Favorites</h3>
<ul class="text-center">
<li>Celery Root</li>
<li>Spaghetti Squash</li>
<li>Killer Mushrooms</li>
</ul>
</div>
<div class="col-lg-9">
<h1>Wild & Wacky Vegetables</h1>
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</div>
</body>
My CSS:
#left-box{
background-color: whitesmoke;
margin-top: 2%;
border: 1px solid white;
border-radius: 3px;
}
ul{
padding-left: 0;
}
ul li{
list-style-position: inside;
}
You need to remove the centering of the text inside your ul element:
<h3 class="text-center">Some Favorites</h3>
<ul>
<li>Celery Root</li>
<li>Spaghetti Squash</li>
<li>Killer Mushrooms</li>
</ul>
Here is a working example:
https://jsfiddle.net/m782jg44/1/
If you want to align the entire list - you will have to set it's width and center the container (the ul element, not the text).
Here is a working example:
https://jsfiddle.net/m782jg44/2/
Here is your updated code
#left-box{
background-color: whitesmoke;
margin-top: 2%;
border: 1px solid white;
border-radius: 3px;
}
ul{
padding-left: 0;
}
ul li{
list-style-position: inside;
}
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="left-box">
<h3 class="text-center">Some Favorites</h3>
<ul>
<li>Celery Root</li>
<li>Spaghetti Squash</li>
<li>Killer Mushrooms</li>
</ul>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"><h1>Wild & Wacky Vegetables</h1>
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</div>
</body>
Remove class text-center from ul tag and try to change ul tag directly or using another class with this style.
ul {
display: table;
margin: 0 auto;
}
Example here: https://jsfiddle.net/lavdimxhelii/p93ccj07/

How to change colour of a box div (HTML)

I am trying to create a website and I am separating my information into boxes. I am trying to change the colour of each individual box but it is not working.
Here is my code. The and is trying to change the colour of the div.
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Blank</title>
***<!--Box-->
<style>.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
</style>***
</head>
<body>
<main>
</main>
<font face="caslon">
<color background: green>
<div class="boxed">
<h1> <font face="caslon", style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
</color>
<color background: red>
<div class="boxed">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</color>
</font>
</body>
</html>
You need to style each div with a background-color
Try adding this style="background-color:YourColorCode;" to your div.
For better understanding on font-face, see this link
See below snippet:
.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
<body>
<main>
</main>
<div class="boxed" style="background-color:green;">
<h1><font style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
<div class="boxed" style="background-color:red">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</body>
You need to give each element an id
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
Your Css will then look like
#box1{
background-color:red;
}
#box2{
background-color:blue;
}
hope it is helpfull to you :)
You are creating custom color tag instead of this use style attribute in div tag.
<div class="boxed" style="background-color:green">
</div>

How to align 3 paragraphs side by side html

Okay, so I've tried all the possible examples of implementing divs, floats, and in-lines to have all three tables side by side with nothing working. Here is the code I have programmed so far, please show me what I might be doing wrong. I could not figure it out after spending a good few hours trying different ways to input the coding
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="left;"><img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:verdana;font-size:10px;color:#636362;"><br>CLOCKWORK DREAMS.</br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="center;"><img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:georgia;font-size:10px;color:#636362;"><br>TRANSCENDED.</br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="right;"><img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:sylfaen;font-size:10px;color:#636362;"><br>THE ENIGMATIC</br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</div></div>
UPDATED
Look at this:
https://jsfiddle.net/fh2st5nm/2/
html:
<div class="oneThird">
<img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" />
<p>CLOCKWORK DREAMS.<br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</p></div>
<div class="oneThird">
<img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" />
<p>TRANSCENDED.<br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</p></div>
<div class="oneThird">
<img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" />
<p>THE ENIGMATIC<br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</p></div>
css:
.oneThird {
width: 33%;
float: left;
background-color: #111;
text-align: justify;
font-family: sylfaen;
font-size: 10px;
color: #636362;
}
.oneThird img {width: 100%;}
.oneThird p {padding: 3px;}
here you dont need css also you should have one main div with width 100% and its children are have style float=left likebelow
<div id="maindiv">
<div class="inline">div 111111111111111111 </div>
<div class="inline">div 2222222222222222222 </div>
<div class="inline"> div 33333333333333333333333</div>
</div>
css..........
.inline{
float:left
}