I'm new to web development and I'm trying to replicate this website on my own.
And now I'm encountering a problem.
I'm not sure why the float: left (under #media) is not correctly working. I made sure to apply box-sizing: border-box to allow the inclusion of the padding and border in an element's total width and height.
Below is my code:
* {
box-sizing: border-box;
}
body{
margin-top: 40px;
background-color: #F9F9FB;
}
.container-fluid {
margin-top: 50px;
}
h3 {
border-left: 1px solid black;
border-bottom: 1px solid black;
margin: 0px;
padding: 1px;
width: 33.33%;
height: 28px;
float: right;
text-align: center;
background-color: #B59F84;
}
.row div {
border: 1px solid black;
padding: 0px;
margin: 10px;
background-color: #FFFFF5;
}
p {
margin: 0px;
padding: 10px;
clear: right;
}
/********** Large devices only **********/
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Assignment Solution for Module 2</title>
</head>
<body>
<h1 style="text-align: center;">Our Menu</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<h3>Div 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-4">
<h3>Div 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-4">
<h3>Div 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
I made sure to apply box-sizing: border-box to allow the inclusion of the padding and border in an element's total width and height.
Edit: it should be float: left not float: right
You need to set the card's width first of all. For responsiveness, go for max-width.
In this example, Im using flexbox along with max-with:400px (change to your needs) for each card. With those few extra lines, your row will be responsive. (In my example, they are centered in the middle of the page, you can change that by playing with justify-content).
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.row div {
border: 1px solid black;
max-width: 400px;
padding: 0px;
margin: 10px;
background-color: #FFFFF5;
}
Related
Below you can see my code. The problem is that section are supposed to be in top right corner. The only way for me to solve the problem is to use relative and absolute positioning, but unfortunately it doesn't work. Please help me with finding the solution using absolute and relative positioning.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jjjj</title>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
}
h1 {
text-align: center;
margin-top: 75px;
margin-bottom: 75px;
}
#test1 {
position: relative;
}
#test2 {
position: relative;
}
#test3 {
position: relative;
}
.base {
background-color: #979691;
border: black solid 2px;
margin: 15px;
padding: 30px;
}
.row {
width: 100%;
}
#p1 {
background-color: #D789B9;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 110;
}
#p2 {
background-color: #D51537;
color: white;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#p3 {
background-color: #D8C84F;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#media (min-width: 992px) {
.col-lg-4, .right-top-lg {
float: left;
}
.col-lg-4{
width: 33%;
}
.right-top-lg {
position: absolute;
bottom: 100px;
left: 0px;
font-weight: 400;
border: black solid 2px;
width: 100px;
text-align: center;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12, .right-top-md{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
#media (max-width: 767px) {
.col-sm-12, .right-top-sm {
float: left;
}
.col-sm-12{
width: 100%;
}
}
</style>
</head>
<h1>
Our Menu
</h1>
<div class="row">
<div id="test1" class="col-lg-4 col-md-6 col-sm-12">
<p id="p1" class="right-top-lg">Chiken</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test2" class="col-lg-4 col-md-6 col-sm-12">
<p id="p2" class="right-top-lg">Beef</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test3" class="col-lg-4 col-md-12 col-sm-12">
<p id="p3" class="right-top-lg">Sushi</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
The position elements were working exactly as you wrote it, but the problem was that you put a margin on the p element that was supposed to look like the container. So the corner label appeared to break out of the box, when in fact it was sitting right where you wanted it to relative to it's parent container.
2 possible solutions.
move the margin: 15px; to the parent containers (#test1 etc)
Put the background color and border on the parent containers so it doesn't appear to break out
Here is option 1.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jjjj</title>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
}
h1 {
text-align: center;
margin-top: 75px;
margin-bottom: 75px;
}
#test1 {
position: relative;
margin: 15px;
}
#test2 {
position: relative;
margin: 15px;
}
#test3 {
position: relative;
margin: 15px;
}
.base {
background-color: #979691;
border: black solid 2px;
padding: 30px;
}
.row {
width: 100%;
}
#p1 {
background-color: #D789B9;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 110;
}
#p2 {
background-color: #D51537;
color: white;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#p3 {
background-color: #D8C84F;
font-size: 20px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
}
#media (min-width: 992px) {
.col-lg-4, .right-top-lg {
float: left;
}
.col-lg-4{
width: 33%;
}
.right-top-lg {
position: absolute;
bottom: 100px;
left: 0px;
font-weight: 400;
border: black solid 2px;
width: 100px;
text-align: center;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12, .right-top-md{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
#media (max-width: 767px) {
.col-sm-12, .right-top-sm {
float: left;
}
.col-sm-12{
width: 100%;
}
}
</style>
</head>
<h1>
Our Menu
</h1>
<div class="row">
<div id="test1" class="col-lg-4 col-md-6 col-sm-12">
<p id="p1" class="right-top-lg">Chiken</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test2" class="col-lg-4 col-md-6 col-sm-12">
<p id="p2" class="right-top-lg">Beef</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="test3" class="col-lg-4 col-md-12 col-sm-12">
<p id="p3" class="right-top-lg">Sushi</p>
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
Can someone help me figure out how to make my pseudo element span the entire width of my div element, instead of cutting off at the scroll please?
I've tried a few different things found online including changing display type, width etc. Please keep in mind this needs to be displayed horizontally. If you have any other suggestions how to make this work or any improvements in general that would be great.
thanks
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Vardana';
}
.container {
background: linear-gradient(to right, rgba(20,30,48,.9), rgba(36,59,85,.9));
margin: 20px;
height: 400px;
border-radius: 10px;
overflow: scroll;
font-size: 13px;
}
.container ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
position: relative;
}
.container ul:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: white;
margin-top: 20px;
}
.Event1:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event2:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event3:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event4:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event5:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
.Event6:before {
content: "";
margin-top: -28px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
background: linear-gradient(to right, rgba(20,30,48,.8), rgba(36,59,85,.2));
border: 1.5px solid white;
}
li {
list-style: none;
}
.Event1 h4 {
color: #feb645;
font-size: 14px;
}
.Event2 h4 {
color: #feb645;
font-size: 14px;
}
.Event3 h4 {
color: #feb645;
font-size: 14px;
}
.Event4 h4 {
color: #feb645;
font-size: 14px;
}
.Event5 h4 {
color: #feb645;
font-size: 14px;
}
.Event6 h4 {
color: #feb645;
font-size: 14px;
}
.Event1 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event2 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event3 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event4 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event5 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
.Event6 {
margin: 10px;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
color: white;
width: 200px;
}
<!DOCTYPE HTML>
<html lang=“en”>
<head>
<title>Dads Website</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="JavaScript.js" defer> </script>
</head>
<body>
<header>
<nav class="navbar">
<h1>History Timeline</h1>
</header>
<div class="container">
<ul id="timelineList">
<li class="Event1"><h4>Event 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event2"><h4>Event 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event3"><h4>Event 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event4"><h4>Event 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event5"><h4>Event 5</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
<li class="Event6"><h4>Event 6</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</div>
</body>
<footer class="footer">
</footer>
</html>
I’ve changed from grid to inline-block to make this still display horizontally. But I think the below worked for me...
Width: max-content;
I am trying to design a responsive web design using media queries, while doing so I have designing this for both large and medium size devices, everything is working perfectly fine but for the medium size device when I squeeze my browser below 992 pixels the box with the title sushi comes down and takes the space of 50% as specified in the media query code, but I want it so that when it comes down it stretches the full browser width.
I tried to do by specifying sushi class in a media-query and setting width to 196% but that didn't work as it should with responsive design.
* {
box-sizing: border-box;
}
h1 {
font-weight: bold;
font-size: 2em;
text-align: center;
}
.chicken {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box1title {
border: 2px solid black;
background-color: pink;
width: 88px;
float: right;
}
.b1content {
text-align: center;
}
.beef {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box2title {
border: 2px solid black;
background-color: rgb(170, 57, 57);
width: 88px;
float: right;
}
.b2content {
text-align: center;
}
.sushi {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box3title {
border: 2px solid black;
background-color: rgb(255, 255, 170);
width: 88px;
float: right;
}
.b3content {
text-align: center;
}
p {
clear: both;
padding: 5px;
}
.container {
width: 100%;
}
#media(min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.83%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 66.66%;
}
.col-lg-8 {
width: 74.99%;
}
.col-lg-9 {
width: 8.83%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.83%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
clear: right;
}
.col-md-7 {
width: 66.66%;
}
.col-md-8 {
width: 74.99%;
}
.col-md-9 {
width: 8.83%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
<div class="container">
<div class="col-lg-4 col-md-6">
<div class="chicken">
<div class="box1title">
<div class="b1content">Chicken</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="beef">
<div class="box2title">
<div class="b2content">Beef</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="sushi">
<div class="box3title">
<div class="b3content">Sushi</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
My table with sushi title should stretch to the max when the browser is squeezed to below 992 pixels like the following image.
You can change the col-md-6 for the sushi box to col-md-12 so that when your screen reaches the correct dimensions your container will span all 12 columns:
<div class="col-lg-4 col-md-12"> <!-- <- change col-md-6 to col-md-12 -->
<div class="sushi">
...
</div>
</div>
See example below:
* {
box-sizing: border-box;
}
h1 {
font-weight: bold;
font-size: 2em;
text-align: center;
}
.chicken {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box1title {
border: 2px solid black;
background-color: pink;
width: 88px;
float: right;
}
.b1content {
text-align: center;
}
.beef {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box2title {
border: 2px solid black;
background-color: rgb(170, 57, 57);
width: 88px;
float: right;
}
.b2content {
text-align: center;
}
.sushi {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box3title {
border: 2px solid black;
background-color: rgb(255, 255, 170);
width: 88px;
float: right;
}
.b3content {
text-align: center;
}
p {
clear: both;
padding: 5px;
}
.container {
width: 100%;
}
#media(min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.83%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 66.66%;
}
.col-lg-8 {
width: 74.99%;
}
.col-lg-9 {
width: 8.83%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.83%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
clear: right;
}
.col-md-7 {
width: 66.66%;
}
.col-md-8 {
width: 74.99%;
}
.col-md-9 {
width: 8.83%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
<div class="container">
<div class="col-lg-4 col-md-6">
<div class="chicken">
<div class="box1title">
<div class="b1content">Chicken</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="beef">
<div class="box2title">
<div class="b2content">Beef</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="sushi">
<div class="box3title">
<div class="b3content">Sushi</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
If we change <div class="col-lg-4 col-md-6"> to <div class="col-lg-4"> it will work... Check https://stackblitz.com/edit/js-w2je7d?file=index.html
I would like to align the contents of div in the middle of vertical alignment. Table-cell will not function here, due to the fact, that parent is and must be displayed flex. This is used in the new WordPress Gutenberg editor. I do not want to modify the editor itself if possible and achieve this with CSS alone. Below you will find how the code looks currently. Custom HTML also cannot be added without editing editor. Is there a possibility of this be achieved in the current state?
Desired result:
Current code and state:
JSFiddle
HTML:
<div class="wp-block-columns has-2-columns right-33">
<div class="wp-block-column">
<h3>Some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-column">
<figure class="wp-block-image">Here be image</figure>
</div>
</div>
CSS:
h3 {margin: 0 0 20px 0;}
.wp-block-columns {
display: flex;
flex-wrap: no-wrap;
padding: 5px;
border: solid 1px red;
}
.wp-block-column {
flex: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
flex-grow: 0;
border: solid 1px blue;
}
.right-33 > div:first-child {
flex-basis: 66.6666%;
margin-right: 32px;
}
.right-33 > div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
You can add this to your wp-block-column column:
.wp-block-column {
display: flex;
flex-direction: column;
justify-content: center;
}
Here's your updated JSFiddle.
This is a great visual guide on Flexbox, it might help you in the future.
Create a column flexbox to .right-33>div:first-child and align to center using justify-content: center - see demo below:
h3 {
margin: 0 0 20px 0;
}
.wp-block-columns {
display: flex;
flex-wrap: no-wrap;
padding: 5px;
border: solid 1px red;
}
.wp-block-column {
flex: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
flex-grow: 0;
border: solid 1px blue;
}
.right-33>div:first-child {
flex-basis: 66.6666%;
margin-right: 32px;
/*ADDED FLEXBOX*/
display: flex;
flex-direction: column;
justify-content: center;
}
.right-33>div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
<div class="wp-block-columns has-2-columns right-33">
<div class="wp-block-column">
<h3>Some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-column">
<figure class="wp-block-image">Here be image</figure>
</div>
</div>
The setting to use for vertically centered alignment of flex children is align-items: center;, applied to the flex container. I added it to your code here (at the end of the CSS section):
h3 {
margin: 0 0 20px 0;
}
.wp-block-columns {
display: flex;
flex-wrap: no-wrap;
padding: 5px;
border: solid 1px red;
}
.wp-block-column {
flex: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
flex-grow: 0;
border: solid 1px blue;
}
.right-33>div:first-child {
flex-basis: 66.6666%;
margin-right: 32px;
}
.right-33>div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
.wp-block-columns.has-2-columns.right-33 {
align-items: center;
}
<div class="wp-block-columns has-2-columns right-33">
<div class="wp-block-column">
<h3>Some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-column">
<figure class="wp-block-image">Here be image</figure>
</div>
</div>
I am stuck on one part of a question for a homework assignment.
We're producing 3 responsive layouts (I called them lg, md, xs) for a simple site consisting of 3 boxes.
We are not allowed to use bootstrap for this. You can see my implementation so far here: https://jennlhay.github.io/coursera-test/assn1/index.html
On the medium sized layout, meant for tablet devices (you can see it by resizing the box), the 3 box layout wraps around.
I'm trying to figure out how to make the third box take up an entire row. As in, take up a different area of the grid than the 2 boxes above it.
I've tried many different ways of doing this (changing the container divs to individual ids, adding some extra column definitions to css for col-md etc) but can't figure it out. HTML and CSS are as follows:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Assignment Solution for Module 2</title>
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="left">Chicken</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>
</div>
</html>
CSS
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetia, sans-serif;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 30px;
}
h2 {
position: relative;
float: right;
border: 1px solid black;
margin: 0;
padding: 10px;
font-size: 125%;
}
#left {
background-color: white;
}
#middle {
background-color: blue;
}
#right {
background-color: gray;
}
.container {
border: 1px solid black;
background-color: yellow;
width: 90%;
margin-right: auto;
margin-left: auto;
margin-bottom: 10%;
overflow: hidden;
}
p {
padding-top: 15px;
font-size: 100%;
clear: right;
}
.row {
width: 100%;
}
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
#media (max-width: 767px) {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
}
.col-xs-1 {
width: 8.33%;
}
.col-xs-2 {
width: 16.66%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.33%;
}
.col-xs-5 {
width: 41.66%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.33%;
}
.col-xs-8 {
width: 66.66%;
}
.col-xs-9 {
width: 74.99%;
}
.col-xs-10 {
width: 83.33%;
}
.col-xs-11 {
width: 91.66%;
}
.col-xs-12 {
width: 100%;
}
}
Are you trying to make the third row full width in a medium sized screen? If so you would just change change the col-md class from:
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>
to:
<div class="col-lg-4 col-md-12 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>
If you are looking for this http://prntscr.com/cq7osg
then below the code that show you how I did this
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetia, sans-serif;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 30px;
}
h2 {
position: relative;
float: right;
border: 1px solid black;
margin: 0;
padding: 10px;
font-size: 125%;
}
#left {
background-color: white;
}
#middle {
background-color: blue;
}
#right {
background-color: gray;
}
.container {
border: 1px solid black;
background-color: yellow;
/* width: 90%; */
margin-right: 15px;
margin-left: 15px;
margin-bottom: 10%;
overflow: hidden;
}
p {
padding-top: 15px;
font-size: 100%;
clear: right;
}
.row {
width: 100%;
}
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
.entire-row {
width: 100%;
}
}
#media (max-width: 767px) {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
}
.col-xs-1 {
width: 8.33%;
}
.col-xs-2 {
width: 16.66%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.33%;
}
.col-xs-5 {
width: 41.66%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.33%;
}
.col-xs-8 {
width: 66.66%;
}
.col-xs-9 {
width: 74.99%;
}
.col-xs-10 {
width: 83.33%;
}
.col-xs-11 {
width: 91.66%;
}
.col-xs-12 {
width: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Assignment Solution for Module 2</title>
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="container"><h2 id="left">Chicken</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
<div class="col-lg-4 col-md-6 col-xs-12 entire-row"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div></div>
</div>
</html>