I have a responsive page here and i have aligned it to center. But i want that whenever i open that page in a mobile window i want to text to stretch and there should be no white space at both right or left side. How can i achieve this? I am using bootstrap 4 and i just need the white space on both sides to be removed when i am viewing the page in mobile
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(https://ibb.co/d7s9Fe);
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;
}
<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="https://ibb.co/d7s9Fe" 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
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="https://ibb.co/d7s9Fe" 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="https://ibb.co/d7s9Fe" 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>
Need to use media query:
Must read about media query
Can you please try.
#media screen and (max-width: 768px) {
.center2{width: 100%;}
.center2 img {
width: 100% !important;
float: left !important;
height: auto !important;
padding: 15px 0;
}
}
Hope this help.
Let me know further clarification.
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(https://ibb.co/d7s9Fe);
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: 768px) {
.center2{width: 100%;}
.center2 img {
width: 100% !important;
float: left !important;
height: auto !important;
padding: 15px 0;
}
}
<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="https://ibb.co/d7s9Fe" 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
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="https://ibb.co/d7s9Fe" 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="https://ibb.co/d7s9Fe" 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>
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 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>
I am planning to create this layout:
I am using wrapper as a class and planning to center everything on the screen.
Aside from the wrapper how can I also put some equal sizes for the text and form.
So far here is my css:
.wrapper {
display: grid;
grid-gap: 20px;
border: 1px solid red;
}
.navbar {
display: grid;
}
a#logo {
width: 212px;
height: 41px;
}
.hero {
display: grid;
grid-template-areas: "hero-text hero-video";
}
.hero-text {
grid-area: hero-text;
border: 1px solid green;
}
.hero-form {
grid-area: hero-video;
border: 1px solid green;
}
Any idea how can I achieve the layout below quickly?
You can checkout my codes here: https://jsfiddle.net/f14qxLf5/1/
Feel free to modify it. Sorry newbie here.
Minimal approach through CSS Grid . Moreover you will get useful tutorial here CSS Grid- by Rachel Andrew.
-Thank You
body {
background-color: #fff;
}
.wrapper {
display: grid;
grid-gap: 20px;
border: 1px solid red;
padding: 20px;
}
.navbar {
display: grid;
text-align: center;
width: 100%;
}
a#logo {
display: inline-block;
width: 212px;
height: 41px;
border: 1px solid gray;
color: #000;
font-size: 22px;
text-decoration: none;
}
.hero {
display: grid;
grid-gap: 5px;
grid-template-areas: "hero-text hero-video";
}
.title {
text-align: center;
border: 1px solid gray;
}
.student-list {
display: grid;
grid-template-areas: "student-info student-info student-info";
grid-gap: 5px;
}
.student-info {
text-align: center;
justify-content: center;
border: 1px solid gray;
min-height: 80px;
}
.hero-text {
grid-area: hero-text;
border: 1px solid green;
padding: 20px;
}
.hero-form {
grid-area: hero-video;
border: 1px solid green;
padding: 20px;
}
footer {
border: 1px solid gray;
text-align: center;
}
<div class="wrapper">
<div class="navbar">
LOGO
</div>
<header class="hero">
<div class="hero-text">
<h2> How to create money online </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 class="hero-form">
<h2> TEXT FORM FOR NOW</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>
</header>
<div class="title">
<h2>Some Heading</h2>
</div>
<section class="student-list">
<div class="student-info">
<h2>Student Name</h2>
<p>text</p>
</div>
<div class="student-info">
<h2>Student Name</h2>
<p>text</p>
</div>
<div class="student-info">
<h2>Student Name</h2>
<p>text</p>
</div>
</section>
<footer>
<p>footer text</p>
</footer>
</div>