I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1 .square-image1 img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-details1 {
padding: 20px 30px 30px;
}
.square1 {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square,
.square1 {
max-width: 460px;
width: 100%;
}
.h11 {
width: 100% !important;
}
}
.containerE {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
}
#media screen and (max-width: 480px) {
.containerE {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
overflow: hidden;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container" style="display: flex; justify-content: space-between;">
<div class="containerE" style="display: flex; justify-content: space-between;">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div>Read More</div>
</div>
</div>
</div>
</div>
</section>
When you run the above code, open it on a new page, inspect it and view it on a 220 width screen, then you can see the text overflows outside the blog card.
I want to make the .h11 and p0 text to fit inside the blog card and not flow outside of it. I dont want to change the font size of both of them, but is there a way I can set the width to 100% so that the text doesn't overflow outside the blog card?
For some reason, the second blog card text is fine even on 220 width screen, but the first blog text is not. Any suggestions to make the .h11 and p0 text fit inside the blog card like the second blog card?
I even tried adding a media query and using width: 100% to .h11 but it did not work.
It's not necessary to do this cause 220px is not a phone for humans maybe for cats. but you can use this simply In your CSS.
* { word-break: break-all; }
* { word-break: break-all; }
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1 .square-image1 img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-details1 {
padding: 20px 30px 30px;
}
.square1 {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square,
.square1 {
max-width: 460px;
width: 100%;
}
.h11 {
width: 100% !important;
}
}
.containerE {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
}
#media screen and (max-width: 480px) {
.containerE {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
overflow: hidden;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container" style="display: flex; justify-content: space-between;">
<div class="containerE" style="display: flex; justify-content: space-between;">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div>Read More</div>
</div>
</div>
</div>
</div>
</section>
Related
I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```
I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
I have the following short and concise code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iframe. The first corner of the blog card should be right under the first corner of the iframe.
Expected Output
How would I modify the css to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions?
Make both parent div of the iframe and div having class .square of the same width to achieve this
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: flex;
gap: 360px;
/* This seems to cause the problem */
width: 100%;
margin: 0 auto;
padding: 20px;
justify-content: center;
overflow: hidden;
}
.square {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-image1 img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.square1 .square-details1 {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
#media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="row1">
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div>Read More</div>
</div>
</div>
</div>
</div>
</section>
I have the above code embedded in a website and so on my end, the output is looking like this on 50% zoom out on page
This is exactly what I want, but when I zoom in to 100%, then my output is looking like this:
See how the end corners are not aligned anymore? If you still cannot see the problem, then refer to the following picture:
See how the corners circled in orange do not align anymore? How would I fix that? I know the gap: 360px is causing the issue but how would I change it so that whatever the user zooms out to, the alignment of the corners never changes? Any suggestions?
Instead of using gap property use margin-left and margin-right for the space between the cards and check the below cards padding to align corner in same line
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.square {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: auto;
object-fit: cover;
}
.square1 .square-image1 img {
width: 100%;
height: auto;
object-fit: cover;
}
.square1 .square-image1,
.square .square-image{
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
height: 220px;
overflow:hidden;
}
.square .square-details {
padding: 20px 30px 30px;
}
.square1 .square-details1 {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
#media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
margin-right: auto;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="row1">
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div>Read More</div>
</div>
</div>
</div>
</div>
</section>
now you can adjust the container width with media query to adjust according to screen size to get exact result as below card.
Also fixed the overflowing image in the card issue
I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1 .square-image1 img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-details1 {
padding: 20px 30px 30px;
}
.square1 {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square,
.square1 {
max-width: 460px;
width: 100%;
}
.h11 {
width: 100% !important;
}
}
.containerE {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
}
#media screen and (max-width: 480px) {
.containerE {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
overflow: hidden;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container" style="display: flex; justify-content: space-between;">
<div class="containerE" style="display: flex; justify-content: space-between;">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div>Read More</div>
</div>
</div>
</div>
</div>
</section>
When you run the above code, open it on a new page, inspect it and view it on a 220 width screen, then you can see the text overflows outside the blog card.
I want to make the .h11 and p0 text to fit inside the blog card and not flow outside of it. I dont want to change the font size of both of them, but is there a way I can set the width to 100% so that the text doesn't overflow outside the blog card?
For some reason, the second blog card text is fine even on 220 width screen, but the first blog text is not. Any suggestions to make the .h11 and p0 text fit inside the blog card like the second blog card?
I even tried adding a media query and using width: 100% to .h11 but it did not work.
It also seems like when I set screen width size to 150px, then even the second blog's text flows outside the card. Is there a way to fix this?
Apply overflow-wrap:anywhere to .square .square-details:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
overflow-wrap:anywhere;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1 .square-image1 img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-details {
padding: 20px 30px 30px;
overflow-wrap:wrap;
}
.square1 {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square,
.square1 {
max-width: 460px;
width: 100%;
}
.h11 {
width: 100% !important;
}
}
.containerE {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
}
#media screen and (max-width: 480px) {
.containerE {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
overflow: hidden;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container" style="display: flex; justify-content: space-between;">
<div class="containerE" style="display: flex; justify-content: space-between;">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div>Read More</div>
</div>
</div>
</div>
</div>
</section>
You can set your title's word-break CSS property to break-word, but notice that it will unpredictably break words wherever the browser sees fit. By default, words do not get broken, so your text will overflow on such small screens.
Let me prefix that I'm not very skilled nor know many good practices, I'm learning by doing as projects come about.
I'm using Swiper for a game list slider, but when its put inside another Div it just disappears. I can position and size it correctly outside the Div, but I can't make it responsive that way and its very unorganized.
Below is the section, with the schedule to be on the left and the game slider to be on the right. When outside of the Games Div it will show, but when inside the Div it entirely disappears.
<!-- Start of schedule container -->
<div id="info-wrapper">
<section id="info">
<div id="schedule" class="container">
<div class="row">
<div class="col">
<h1 id="title"> Stream Schedule</h1>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Mondays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Tuesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Wednesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Thursdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Fridays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
</div>
<!-- Container for game list -->
<div id="games" class="container">
<h1 id="title"> What I've been playing </h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</section>
Full CSS below for main stylesheet. All other styles for Swiper can be found at http://idangero.us/swiper/
body, html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
color: #fff;
font-size: 100%;
line-height: 1.25em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
.clear:after, .clear:before, .container:after, .container:before {
content: "";
display: table;
}
.clear:after, .container:after {
clear: both;
}
.clear, .container {
zoom: 1;
}
#header ul #nav li a:hover, .accent, .btn:hover {
background: #rgba(62, 24, 82, 1);
color: #fff;
}
.forum {
padding: 3px 8px 4px 8px !important;
}
.btn:hover {
border-color: #6246a3;
}
.container {
padding: 0 3%;
}
#header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 40px 35px;
}
#header #displayname {
margin: 0;
padding: 0;
font-size: 137%;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.label {
font-family: Arial, sans-serif;
font-size: 54%;
letter-spacing: 1px;
padding: 0 8px;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
white-space: nowrap;
vertical-align: middle;
font-weight: 700;
margin-top: -4px;
display: inline-block;
}
#header ul#nav {
margin: 2px 0 0;
padding: 0;
}
#header ul#nav li {
display: inline-block;
list-style: none;
font-size: 120%;
}
#header ul#nav li a {
padding: 3px 8px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
transition: background .3s ease;
outline: none;
}
#content {
box-sizing: border-box;
padding: 132px 0;
width: 100%;
height: 100%;
display: table;
text-align: center;
background: rgba(0, 0, 0, .7);
}
#content .container {
display: table-cell;
vertical-align: middle;
}
.avatar {
border-radius: 50%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 25px;
width: 145px;
height: 145px;
}
.name {
color: #eee;
font-size: 104%;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 7px;
line-height: 1.5em;
}
.status {
font-size: 220%;
line-height: 1.3em;
font-weight: 300;
letter-spacing: 0;
margin: 0 0 20px;
}
.btn {
padding: 15px 24px;
border: 1px solid #FFF;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
transition: background ease .3s;
}
.live {
background: rgba(62, 24, 82, 1);
border: none;
-webkit-animation: pulse 2s infinite;
-moz-animation: pulse 2s infinite;
-o-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
.label .live-status {
font-size: 20px;
line-height: 19px;
vertical-align: middle;
margin-right: 3px;
}
#footer {
position: absolute;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 14px 30px;
}
#footer p {
font-size: 80%;
color: #FFF;
font-weight: 600;
opacity: .4;
transition: opacity ease .3s;
line-height: 1em;
}
#footer p:hover {
opacity: .8;
}
#footer .left {
float: left;
}
#footer .right {
float: right;
}
#media (min-width: 801px) {
#header #displayname {
float: left;
}
#header ul#nav {
float: right;
}
#header ul#nav li {
margin-left: 21px;
}
}
#media (max-width: 800px) {
#header {
padding: 24px 20px 20px;
}
#header #displayname {
text-align: center;
}
#header ul#nav {
margin: 20px auto 0;
text-align: center;
}
#header ul#nav li {
margin: 0 4px 12px;
}
}
#media (max-width: 750px) {
.name {
font-size: 100%;
}
.status {
font-size: 200%;
}
.btn {
width: 80%;
}
.avatar {
width: 120px;
height: 120px;
}
#footer p {
font-size: 60%;
padding: 0px 0px;
}
.accent, .btn:hover, #header ul#nav li a:hover {
background: #330066;
}
.btn:hover {
border-color: #330066;
}
.live {
background: #330066;
border: none;
}
#-webkit-keyframes pulse {
from {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-webkit-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
}
#-moz-keyframes pulse {
from {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-moz-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
}
#-o-keyframes pulse {
from {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-o-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
}
#keyframes pulse {
from {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
}
}
#content {
background: rgba(0, 0, 0, .8)
}
#live {
background: url("http://www.tokkoro.com/picsup/2860789-batman-the-dark-knight-joker-messenjahmatt___movie-wallpapers.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
#info-wrapper {
background: url("../img/cell.jpg") no-repeat center center;
}
#info {
height: 60vh;
width: 100%;
padding: 0;
margin: 0;
background-color: rgba(39, 0, 59, .8);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#schedule {
background-color: rgba(0, 0, 0, .4);
display: inline-flex;
flex-direction: column;
width: 30vh;
height: auto;
float: left;
}
#dates {
font-size: 80%;
}
#dates .p {
font-size: 100%;
}
/* Games Section Wrapper */
.swiper-container {
width: 50%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#title {
color: #fff;
font-size: 150%;
font-weight: 600;
letter-spacing: 2px;
}
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
/* Pulse Animations Min */
#-webkit-keyframes pulse {
from {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-webkit-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
}
#-moz-keyframes pulse {
from {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-moz-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
}
#-o-keyframes pulse {
from {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-o-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
}
#keyframes pulse {
from {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
}
/* Querying additional screen sizes. */
#media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
Please let me know if I'm lacking any more information here and I'll update! Scratching my head with this, so thank you in advance for any help!
Add CSS:
#games{
height: 100%;
}