contents are going outside from grid box - html

.mn2 {
display: grid;
grid-template-columns: 30vh 30vh;
grid-template-rows: 30vh 30vh;
grid-gap: 5px 5px;
height: 50vh;
border: 3px dashed red;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>


You should let the content define box height & widths. By setting everything to auto..
you can set height of the boxes with grid-auto-rows: [first-row-height] [second-row-height]; for eg
grid-auto-rows: 200px 200px;
.mn2 {
display: grid;
grid-template-columns: auto auto;
grid-auto-rows: 200px 200px;
grid-gap: 5px 5px;
height: auto;
}
.mn2>div {
padding: 1rem;
background-color: gray;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>


Try this:
.mn2 {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
grid-gap: 5px 5px;
height: auto;
border: 3px dashed red;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>

Related

How to stretch big gap in flexbox? [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 11 months ago.
I made a menu whose container using flexbox, I want this menu to only have 2 columns, and if there are many menus it can only scroll vertically not horizontally. But I want each menu to have a close distance. I've made the code and css like the snippet below, but when there is a menu that has many children, the menu next to it has too much gap. how to solve this?
.menu-dropdown{
height: 200px;
overflow:auto;
}
.wrapper-container{
min-width: 560px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 300px;
}
.menu-item{
max-width: 50%;
width: fit-content;
display: flex;
}
<div class="menu-dropdown">
<div class="wrapper-container">
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
</div>
</div>

No, row-flex ain't gonna work here. If you want a vertical scroll, column-flex will work neither.
The behaviour you are trying to achieve is created via columns:
.wrapper-container{
columns: 2;
}
.menu-item{
break-inside: avoid-column;
}
Here's an example codepen

Css display property not working perfectly in my practice website

I don't understand why 2nd div is not up of 1st div. I want they 2 div perfectly set as like my image direction. already i try display block but not working. i don't know why main problem. already i have many research, but all fail. so please help me to solution my problem. advanced thanks and love from my top heart.
`
.testimonial .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx{
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</section>
`

Wrap those 2 divs in 1 div and make it as flex.
Updated Code
.testimonial .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx {
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="container">
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</div>
</section>
</body>
</html>

Answer from #nagendraNag is ideal. I would just remove the max-width
max-width: calc(50% - 40px);

more than h1 inline with grid template areas

hi all i am new to html and css i got a simple question:
i wrote this html code
<div class="ourtlimg">
<div class="name1"><h1>Daniel Martin</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
<div class="name2"><h1>Craig Nobel</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
<div class="name3"><h1>Nicole Mark</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
</div>
i made a grid-template-area for the class name1,name2,name3 in 6times 1fr repeat as{port1 port1 port2 port2 port3 port3}to display in one line and when i give each class one of three grid areas it display like the image below.I want to display them in one line with the grid system can you help please.I want them across the page instead of down the pageenter image description here
i added this css for the wrapper:
.wrapper{
display: grid;
grid-template-columns: repeat(6,1fr);
grid-template-areas:
'header header header header header header'
'navbar navbar navbar navbar navbar navbar'
'welsec welsec welsec welsec welsec welsec'
'tlinfo tlinfo tlinfo tlinfo tlinfo tlinfo'
'port1 port1 port2 port2 port3 port3'
;
}
and this for the classes in code:
.name1{
grid-area: port1;
float: left;
}
.name2{
grid-area: port2;
float: left;
}
.name3{
grid-area: port3;
float: left;
}

This css code will do all the work =)
.ourtlimg {
display: flex;
justify-content: flex-start;
display: -webkit-flex;
-webkit-justify-content: flex-start;
}
<div class="ourtlimg">
<div class="name1">
<h1>Daniel Martin</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
</div>
<div class="name2">
<h1>Craig Nobel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
</div>
<div class="name3">
<h1>Nicole Mark</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
</div>
</div>

How to make star at the end of paragraph(which is of 3 lines) in HTML

I am trying to make a star at the end of a para, but I am not able to get the appropriate result.
Html code:
.A {
display: flex;
}
.First-Para {
font-size: 40px;
}
<div class="A">
<div class="First-Para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus
</div>
<div>*</div>
</div>

I think you need provide absolute to the star div as shown below.
<div class="A">
<div class="First-Para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus
</div>
<div class="star-class">*</div>
</div>
.A {
display: flex;
}
.First-Para {
font-size: 40px;
}
.star-class{
position:absolute;
}

Use This
<div class="A">
<div class="First-Para">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus <b style="color: red">*</b></p>
</div>
</div>

Use span and put this inside First-Para
.First-Para
{
font-size:40px;
}
<div class="A">
<div class="First-Para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus<span>*</span>
</div>
</div>

Try This:-
Use vertical-align:sub; property to set * baseline with text.
.A{
display:flex;
}
.First-Para
{
font-size:40px;
}
<div class="A">
<div class="First-Para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus
<span class="First-Para" style="vertical-align:sub;">*</span>
</div>
</div>

You could always try to add the asterisk with a pseudo element like :after.
.First-Para {
font-size:40px;
}
.First-Para:after {
content: "*";
margin-left: -10px;
}
<div class="A">
<div class="First-Para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus
</div>
</div>

You can try superscript and star unicode of the HTML
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus <sup>&starf;</sup>
it will look like this
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, natus &starf;

CSS - Media queries - elements not stacking / floating properly

I'm setting media queries for tablet-size screens and my nav bar, header logo and top section don't seem to want to stack properly. If I fix the position of the nav I'm losing the section heading or if I put the nav position as static the nav bar is trying to hide behind it. So, when I reduce to 680px or below I get this at the top of my screen -
Or this -
It all stacks fine at 480px and below so not sure what I'm doing wrong. Here are my media queries -
#media screen and (max-width: 680px) {
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
border-bottom: 0;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
position: relative;
top: 0;
left: 21%;
}
section {
float: none;
height: auto;
}
}
#media screen and (max-width: 480px) {
body {
max-width: 500px;
}
header {
height: auto;
}
nav {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
position: static;
}
nav a {
display: block;
border-bottom: 0;
}
nav a:hover {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
position: relative;
top: 0;
left: 21%;
}
section {
float: none;
height: auto;
font-size: 20px;
}
<header>
<div id="logo"> <img src="images/havoc_logo.png"> </div>
<nav>
Home
What we do
Who we are
Who we work with
Say hello
Blog
</nav>
</header>
<section id="whatwedo">
<div class="container-fluid">
<h1><span style="color: rgb(133,52,146);">+</span>What we do</h1>
<div class="cols">
<div class="row no-gutters">
<div class="col-md-3">
<h2>ADVERTISING</h2>
<img src="images/advertising.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>GRAPHIC DESIGN</h2>
<img src="images/graphic_design.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>BRAND IDENTITY</h2>
<img src="images/brand_identity.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>BRAND GUIDELINES</h2>
<img src="images/beard.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-3">
<h2>PRINT MANAGEMENT</h2>
<img src="images/print.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>CREATIVE DIRECTION</h2>
<img src="images/creative_direction.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>EDITORIAL DESIGN</h2>
<img src="images/ed_design.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>AND LOTS OF OTHER STUFF</h2>
<img src="images/other_stuff.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
</div>
</div>
</div>
</section>
Any help appreciated.

I think your problem is the height!
Try with min-height.

It is really hard to find errors in your code when this amount of it is provided. You should post relevant html, use css-flexbox or bootstrap grid (or any other grid system). You can find Bootrstrap v.4 grid only (withot any other styling) here. Hope it helps!