I have the following div created, but because I'm using negative left margin to offset the icon, I can't center the entire div. We can get away with it on desktop since you can't really tell too easily that the whole div is shifted to the left a bit, but on mobile, the left side of the round icon gets cut off. How can I center the entire div?
.icon-text-box {
border: 1px solid red;
}
.icon-box {
background: #fff;
border-radius: 33px;
margin: 6rem auto;
padding: 4rem 4rem 4rem 7rem;
box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
position: relative;
display: flex;
align-self: center;
max-width: 900px;
}
.icon-box p {
font-size: 22px;
margin-bottom: 0;
}
.icon-box-icon {
position: absolute;
left: -90px;
overflow: hidden;
display: flex;
align-self: center;
height: 177px;
}
.icon-box-icon img {
border-radius: 40px;
}
<div class="container-fluid mw-972 icon-text-box">
<div class="icon-box">
<div class="icon-box-icon">
<img src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-simple-green-logo-icon-24.png" />
</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>
Instead of auto margin you can use a different idea to center and at the same time add some margin on small screen
margin: 6rem max(90px,(100% - 900px)/2);
Full code:
.icon-text-box {
border: 1px solid red;
}
.icon-box {
background: #fff;
border-radius: 33px;
margin: 6rem max(90px,(100% - 900px)/2);
padding: 4rem 4rem 4rem 7rem;
box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
position: relative;
display: flex;
}
.icon-box p {
font-size: 22px;
margin-bottom: 0;
}
.icon-box-icon {
position: absolute;
left: -90px;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
display: flex;
height: 177px;
}
.icon-box-icon img {
border-radius: 40px;
}
<div class="container-fluid mw-972 icon-text-box">
<div class="icon-box">
<div class="icon-box-icon">
<img src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-simple-green-logo-icon-24.png" />
</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>
Also like below if you want margin on one side:
.icon-text-box {
border: 1px solid red;
}
.icon-box {
background: #fff;
border-radius: 33px;
margin: 6rem max(0px,(100% - 900px)/2) 6rem max(90px,(100% - 900px)/2);
padding: 4rem 4rem 4rem 7rem;
box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
position: relative;
display: flex;
}
.icon-box p {
font-size: 22px;
margin-bottom: 0;
}
.icon-box-icon {
position: absolute;
left: -90px;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
display: flex;
height: 177px;
}
.icon-box-icon img {
border-radius: 40px;
}
<div class="container-fluid mw-972 icon-text-box">
<div class="icon-box">
<div class="icon-box-icon">
<img src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-simple-green-logo-icon-24.png" />
</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>
Related
I'm trying to place an image in a circle div that's placed above a section containing text like in the image shown:
How can this be done using CSS? Thank you.
Run the Code Here
https://www.w3schools.com/code/tryit.asp?filename=GHOLRSYI9PEK
.flex-wrapper{
background-color: lightgray;
padding: 30px;
padding: 30px 30px 30px 100px;
}
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
margin: 10px;
padding: 10px;
font-size: 16px;
}
.flex-container{
-webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
}
.avatar-wrapper{
min-width: 150px;
position: relative;
margin-left: -50px !important;
margin: 10px;
padding: 10px;
font-size: 16px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-wrapper:after{
content: '';
height: calc(100% + 40px);
width: calc(100% + 40px);
position: absolute;
background: purple;
top: -20px;
left: -20px;
border-radius: 50%;
z-index: 0;
}
.avatar-wrapper > img{
width: 150px;
height: 150px;
z-index: 1;
position: relative;
border-radius: 50%;
}
<div class="flex-wrapper">
<div class="flex-container">
<div class="col avatar-wrapper">
<img src="https://via.placeholder.com/200" alt="sample">
</div>
<div class="col text">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div>
</div>
</div>
img{ border-radius:50%; z-index:1 }
.container{
z-index:0;
margin-left:-100px;
box-shadow: 0px 0px 10px 1px lightgrey;
padding:5px;
width:50%;
}
.text{
text-decoration:underline blue;
margin-left:100px;
}
<div style="display:flex;">
<img src="https://via.placeholder.com/250">
<div class="container">
<div class="text">
I'm trying to place an image in a circle div that's placed above a section containing text like in the image shown:
</div>
</div>
</div>
Here is your solution. Just add your Image url in img tag
I want to add an icon as a connector before a div container: something like this:
This is what I have have (https://jsfiddle.net/kmcursf6/).
.parent {
border-left: 1px solid #ff0000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
left: -20px;
top: 50%;
border-top: 1px solid #ff0000;
width: 20px;
}
.child:last-child::after {
position: absolute;
content: '';
left: -21px;
top: calc(50% + 1px);
bottom: 0;
border-left: 1px solid #FFFFFF;
}
<div class="parent">
<div class="child">
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
</div>
<div class="child">
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
</div>
<div class="child">
click to add more
</div>
</div>
I tried this to add that icon:
.child::before {
position: absolute;
content: '';
left: -20px;
top: 50%;
width: 20px;
transform: rotate(90deg);
border-radius: 20px;
}
but it doesn't work and it completely throws off what I have. Any ideas how to get there?
.child::after {
position: absolute;
content: '';
left: -10px;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
background: #000;
border-radius: 90%;
clip-path: polygon(50% 0, 50% 100%, 0 100%, 0 0);
}
https://jsfiddle.net/r5z0av87/1/
.parent {
border-left: 1px solid #000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
left: -5px;
top: calc(50% - 5px);
border: 1px solid black;
background: black;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: -1;
}
.child::after{
position: absolute;
content: '';
left: -20px;
top: 50%;
border-top: 1px solid #000;
width: 20px;
}
.child:last-child::after {
position: absolute;
content: '';
left: -21px;
top: calc(50% + 1px);
bottom: 0;
border-left: 1px solid #FFFFFF;
}
<div class="parent">
<div class="child">
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
</div>
<div class="child">
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
</div>
<div class="child">
click to add more
</div>
</div>
Add an ::before element. Create an square. put border-radius: 50% so you have an circle. Then position the element at the right place. Put z-index: -1 so that the circle is under your div block.
Use calc to calculate the vertical alignment. calc(50% - 5px) here i used 50% like for the lines and 5px are the half of the width or height of the square.
For left i used 6px. Usually 5px, the half of the width, should be the exact half but i decided to go with 6px kinda looks better for me, personal opinion.
.child::before {
position: absolute;
content: '';
left: -6px;
top: calc(50% - 5px);
border: 1px solid black;
background: black;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: -1;
}
It's hard to create a black circle and a horizontal line in the middle with using only CSS. Therefore, I reached the conclusion that the circle and the horizontal line must be two separate pseudo-elements.
In this case, the ::after pseudo-element creates the circle part. Also, we use the z-index to make it so that the full circle appears only as semicircle because half of it is covered by div.child.
As for the horizontal line, we are still creating it using the ::before pseudo-element. However, the line (from the parent's border-left) is protruding and we want to make the last trailing bit of the list-like line disappear. To do this, we can modify the last div.child's ::before pseudo-element so that it is instead a rectangle. Set its height to 50% of div.child, position it to 50% from the top of the div.child, make the border-top black to create the horizontal line, and make the border-left white to cover the parent's trailing line.
Here's a working example. I used 4px on last div.child::before pseudo-element so that it doesn't draw wrongly upon zoom. Also, you might want to read about box-sizing: border-box here (although unrelated).
.parent {
font-family: Helvetica;
font-size: 0.8em;
border-left: 1px solid #000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
top: 50%;
left: -20px;
border-top: 1px solid #000;
width: 20px;
}
.child::after {
position: absolute;
z-index: -1;
content: '';
top: 50%;
left: -5px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
transform: translateY(-50%);
}
.child:last-child::before {
box-sizing: border-box;
border-left: 4px solid #FFF;
height: 50%;
left: -22px;
}
<div class="parent">
<div class="child">
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
</div>
<div class="child">
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
</div>
<div class="child">
click to add more
</div>
</div>
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 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 have this page here demoPage I am trying to make my navbar brand reponsive with the page. For now i have added custom padding with navbar-brand but i want it to be responsive with the page if i change the size of my browser. Also i want a little space between my school title and its logo. How can i do that? I have written this page in an angular component
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.alignLeft {
float: left;
}
.indented {
padding-left: 50pt;
padding-right: 50pt;
}
.col-sm-9 {
background-color: white;
}
img {
padding-left: 10px;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
padding-left: 20px;
}
h4,
p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.para1 {
text-align: center !important;
}
h4:first-child {
display: inline;
margin-left: 20px !important;
}
h4:nth-child(2) {
text-align: left !important;
}
p:first-child {
text-align: center !important;
}
p:nth-child(3) {
text-align: left !important;
float: left !important;
}
#media (min-width: 480px) {
img {
float: left;
padding-right: 10px;
padding-bottom: 0px;
}
.col-sm-9 {
padding-bottom: 25px;
}
h4,
p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.container-fluid {
text-align: justify !important;
}
}
.columns1 {
align-self: center;
justify-self: center;
background-color: white;
margin-bottom: 0;
}
.center2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
padding-left: 400px;
padding-right: 400px;
margin-bottom: 0;
}
.center {
margin: 0 auto;
width: 90%;
padding-left: 300px;
}
.jumbotron {
align-items: center;
}
.center1 {
margin: auto;
width: 50%;
padding-left: 140px;
}
.footer-copyright {
width: 100%;
background-color: gray;
padding-right: 70px;
}
.footer {
font-family: "Roboto", sans-serif;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border: none;
background-color: grey;
bottom: 0;
position: relative;
left: 0;
z-index: 12;
width: 100%;
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
float: left;
height: 50px;
font-size: 18px;
margin-top: 100px;
}
.footer a {
background-color: transparent;
}
a {
color: white;
text-align: center;
}
.navbar-brand {
padding-left: 450px;
}
.navbar {
font-family: "Roboto", sans-serif;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border: none;
position: fixed;
top: 0;
left: 0;
z-index: 12;
width: 100%;
}
.navbar .navbar-brand {
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> HTML Code
<div class="container-fluid">
<nav class="navbar">
<a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management
System</span></a>
</nav>
<div class="jumbotron vertical-center">
<div class="row content">
<div class="center2">
<div class="columns1 text-center">
<img class="img-responsive" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
<h4 align="left" style="margin-top: 90px;">
School Name/ Title<br><br><br>
</h4>
<br>
<hr>
<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 </p>
</div>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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
</p>
</div>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<br>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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
</p>
</div>
<br>
<hr>
<div>
<h3>Address</h3>
<i class="material-icons" style="color:red;">location_on</i><span id="txt1">Address,County,City,District</span>
</div>
</div>
</div>
</div>
<div class="footer">
<a href="">
<h3>Gep Learning Management Sytem</h3>
</a>
</div>
</div>
</div>
On your navbar-brand, add the class of mx-auto
<a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index"><i class="fa
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management
System</span></a>
Then, in your css, remove the padding-left that you added to .navbar-brand.
.navbar-brand {
/*padding-left: 450px;*/
}
As for the space between the logo and school title, you can add a class of mr-1, mr-2, or mr-3 (or 4, or 5) to the img, depending on how much space you want.
<img class="img-responsive mr-2" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
mx-auto centers content.
mr-1 (or 2, 3, etc.) adds margin-right (hence "m" and "r").
Check out the documentation on spacing on Bootstrap 4: https://getbootstrap.com/docs/4.1/utilities/spacing/
I'm assuming you are using Bootstrap 4. :)
Here is how i solved this
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.alignLeft {
float: left;
}
.indented{padding-left: 50pt; padding-right: 50pt;}
.col-sm-9 {
background-color: white;
}
img {
padding-left: 10px;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
padding-left: 20px;
}
h4, p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.para1 {
text-align: center !important;
}
h4:first-child {
display: inline;
margin-left: 20px !important;
}
h4:nth-child(2) {
text-align: left !important;
}
p:first-child {
text-align: center !important;
}
p:nth-child(3) {
text-align: left !important;
float: left !important;
}
.center3 {
margin: auto;
width: 65%;
margin-bottom: 0;
}
.columns1 {
align-self: center;
justify-content: center;
background-color: white;
margin-bottom: 5px;
padding-bottom: 50px;
}
.thumb {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
background-image: url(/assets/images/school.png);
background-size: cover;
background-position: center;
margin-top: 60px;
margin-left: 20px;
float: left;
}
.center2{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
margin: auto;
width: 65%;
margin-bottom: 0;
}
i.material-icons {
font-size: 16px;
vertical-align: middle;
position: relative;
font-size: 24px;
}
p {
font-size: 17px !important;
}
.center2 .footer {
bottom: 0;
}
.center {
margin: 0 auto;
width: 90%;
padding-left: 300px;
}
.jumbotron {
align-items: center;
background-color: white;
overflow-x: hidden;
}
.navbar {
align-items: center;
}
.center1 {
margin: auto;
width: 50%;
padding-left: 140px;
}
.footer-copyright {
width: 100%;
background-color: gray;
padding-right: 70px;
}
.footer {
font-family: "Roboto", sans-serif;
background-color: grey;
bottom: 0;
margin : auto;
margin-bottom: 0;
position: relative;
z-index: 12;
font-size: 10px;
display: grid;
text-align: center;
margin-left: auto;
margin-right: auto;
text-overflow: ellipsis;
}
.footer a {
background-color: transparent;
}
a {
color: white;
text-align: center;
}
.container-fluid {
background-color: white;
}
#media screen and (max-width: 700px) {
.center2 {
width: 100%;
}
.center3 {
width: 100%;
}
.img-responsive {
width: 100% !important;
}
}
<nav class="navbar">
<div class="center3">
<a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
<i class="fa fa-cubes"></i> GEP
<span class="header-logo-text">Learning Management System</span>
</a>
</div>
</nav>
<div class="jumbotron vertical-center">
<div class="row content">
<div class="center2">
<div class="columns1 text-center">
<div class="thumb"></div>
<h4 align="left" style="margin-top: 100px;">
<span style="margin-left: 20px;">School Name</span>
</h4>
<br>
<br>
<br>
<hr>
<section>
<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
</p>
</div>
</section>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
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
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
<br><br>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>
</section>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
<br><br>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>
</section>
<br>
<br>
<br>
<br>
<section>
<div>
<h3><u>Address</u></h3>
<i class="material-icons" style="color:red; ">location_on</i>
<span id="txt1" style="font-size: 15px;">Address,County,City,District</span>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="footer">
<div>
<a href="">
<h3>Gep Learning Management System</h3>
</a>
</div>
</div>