Related
THIS IS A RESPONSIVE DESIGN, MAKE SURE TO TURN ON TOGGLE DEVICE TOOLBAR ON YOUR BROWSER
I am trying to make a progress bar. First I want to increase the height of the transparent black background. I can't find a way to do that. I am confused. And secondly, I want to add spacing and align the 2nd and 3rd text properly.
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</section>
You can take advantage of the <br> element in your HTML.
Line break and tab elements can be used when you need a little more control over how the browser renders the text. The <BR> element is used to force a line break.
-W3.org
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
The Height: - I noticed a fixed height of 300px, and that you were centering the parent div by using margins and translations in your CSS. I went ahead and removed those margins and translations, also removed your absolute positioning. You can adjust your fixed height of 300px to expand the grey background. For this example, I made it 100 view height.
/* progress bar */
.center {
height: 100vh;
width: 100%;
padding: 20px;
position: relative;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
If I understood properly, what you want to increase the height is for that black bar containing your actual progress bar, right? If that's the case, I think this should work:
.skill-percentage {
height: x (here you place how much height you want);
}
That should give you the height that you want.
And, in order to add the spacing, you can take advantage of CSS padding or margin, depending on what you exactly need.
I'll give you a small snippet here so you can see exactly what I mean. Note that I modified a bit your HTML to fit what you wanted to do, but this may not be necessary on your original file.
/* progress bar */
* {
margin: 0;
padding: 0;
}
.center {
height: 500px;
width: 100%;
background-color: rgba(0, 0, 0, 0.678);
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 0;
}
/* skillbar languages */
.text-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.text-container p {
padding: 0 40px; /* this is the one that changes the position of your text. Be carefull, you don't want this to change the position too much, just a bit, if you need to change the full position, better try something like grid, or modifying the flex */
}
.skillbar-html {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-html p {
margin: 10px;
}
.skillbar-html > div {
margin: 10px;
}
.skillbar-css {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-css p {
margin: 10px;
}
.skillbar-css > div {
margin: 10px;
}
.skillbar-javascript {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-javascript p {
margin: 10px;
}
.skillbar-javascript > div {
margin: 10px;
}
.skill_percentage{
height: 20px; /* this is the one that changes your height, now it's changing nothing, but you can modify the height by changing this value */
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<div class="text-container">
<p>HTML</p>
<p>90%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;">
</div>
</div>
</div>
<div class="skillbar-css">
<div class="text-container">
<p>CSS</p>
<p>70%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;">
</div>
</div>
</div>
<div class="skillbar-javascript">
<div class="text-container">
<p>JavaScript</p>
<p>50%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;">
</div>
</div>
</div>
</div>
</section>
I want to set all of these boxes width and height after the most biggest one.. display: flex destroy whole card.
Can someone tell me what change, what add or what to do, to let that code still working?
CSS
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
HTML
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
You need to add a little bit of JS, in this snippet I used two forEach cycles for the profiles, the first is used to detect the maximum width and height of each profile, and the second is applying it to all profile elements. So all the profile elements have the maximum width and height.
let profiles = document.querySelectorAll(".profile"),
profileWidth = 0,
profileHeight = 0;
profiles.forEach(function(profile){
if(profile.offsetHeight > profileHeight){
profileHeight = profile.offsetHeight;
}
if(profile.offsetWidth > profileWidth){
profileWidth = profile.offsetWidth;
}
});
profiles.forEach(function(profile){
profile.style.height = profileHeight + "px";
profile.style.width = profileWidth + "px";
});
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
I hope I understand correctly what your actual problem is. But I'll try anyway...
How about including all .profile elements in a container div and replace max-width with just width? Also .profile:hover will be best to scale to 1.05.
.profiles-container {
widht: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
cursor: pointer;
transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
<div class="profiles-container">
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
</div>
I think you are mistaken to consider finding the bigger one. You just have to decide on a size that fits what you want to do and going with it. You can then adjust the child elements of profile.
you can use flex attribute but is not related to your question
in my opinion you must use JavaScript or other scripts to do that
in JavaScript:
1-get All boxes
2-find the biggest
3-set Other boxes with and height
but its will be nice by using :
css:
body {
display: flex;
}
.profile {
flex: 1;
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
html:
<div className="profile">
<img src="default.jpg" alt="Profile photo" className="profile_image">
<div className="profile_name">Name</div>
<div className="profile_info">Men (12 years)</div>
<div className="profile_verifed"><i className="material-icons">check</i>Verifed</div>
</div>
<div className="profile">
<img src="default.jpg" alt="Profile photo" className="profile_image">
<div className="profile_name">Administrator Adminovsky</div>
<div className="profile_info">Men (12 years)</div>
<div className="profile_verifed"><i className="material-icons">check</i>Verifed</div>
</div>
or use JavaScript :
var boxes = $(".profile");
var maxWidth = 0;
boxes.each((index,data)=>{
if(maxWidth<$(data).width())
maxWidth = $(data).width()
});
boxes.each((index,data)=>{
console.log(maxWidth);
$(data).width(maxWidth);
});
.profile {
font-family: 'Nunito', sans-serif;
text-align: center;
max-width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
transition: all .3s ease
}
.profile:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.profile a {
color: #000000;
text-decoration: none;
}
.profile_image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 20px auto;
display: block;
}
.profile_name {
font-size: 1.2em;
font-weight: bold;
}
.profile_info {
margin-bottom: 20px;
}
.profile_verifed {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
color:rgb(5, 148, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Name</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
<div class="profile">
<img src="default.jpg" alt="Profile photo" class="profile_image">
<div class="profile_name">Administrator Adminovsky</div>
<div class="profile_info">Men (12 years)</div>
<div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
</div>
i'm currently working on a webpage for my design class and i have a problem. This is the browser view:
I am kinda new with html and css but i have tried display in-line block, flex... Nothing worked, and i dont know what else i could do
So the problem is that the text "aaaaa" must be next to image. Here is my html code:
.caixa {
word-wrap: break-word;
width: 70%;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
margin: 25px;
margin-left: 0px;
border-radius: 10px;
}
.caixa-img {
display: inline-block;
margin: 15px;
width: 15%;
position: relative;
}
.caixa-img img {
margin-right: 120px;
border-radius: 10px;
width: 100%;
height: 100%;
}
.info {
width: 100%;
padding: 10px 20px;
}
.tipo {}
.descripcio {
display: block;
background-color: chartreuse;
}
.tipo a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.tipo span {
color: rgba(26, 26, 26, 0.5);
}
.preu {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(226, 197, 88, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.comprar {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.comprar:hover {
color: #FFFFFF;
background-color: rgb(248, 171, 55);
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.caixa-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="col-12 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
<!--
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>-->
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
Below an example using flexbox (see .caixa).
.caixa {
width: 70%;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
margin: 25px 25px 25px 0;
/* margin-left: 0px; */
border-radius: 10px;
display: flex; /* Added */
}
.caixa-img {
margin: 15px;
width: 30%;
}
.caixa-img img {
border-radius: 10px;
width: 125px; /* For demo */
height: 125px; /* For demo */
}
.info {
width: 100%;
padding: 10px 20px;
}
.tipo {}
.descripcio {
display: block;
background-color: chartreuse;
word-break: break-all; /* Essential to break large words */
}
.tipo a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.tipo span {
color: rgba(26, 26, 26, 0.5);
}
.preu {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(226, 197, 88, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.comprar {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.comprar:hover {
color: #FFFFFF;
background-color: rgb(248, 171, 55);
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.caixa-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="col-12 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
if you use boostrap framework
you can use the bootstrap column and row.
<!-- language: lang-html -->
<div class="row">
<div class="col-6 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
</div>
<div class="col-6">
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
<!--
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>-->
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
You have too much nested divs that dont need to be there, just making it more complex.
Also, your text is going outside your div borders, this is not a good thing.
You can move your text next to the image by using flex.
You always apply flex on a parent of the element that you want to move around (in this case, div with a picture, and div with a text).
So you are going to apply flex to a div that holds both of those divs (div with image, and div with text).
Here is my solution to this problem on a simple example, it should help you :
https://codepen.io/Juka99/pen/YzGVQyv
html, body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform:translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
#navbar {
}
.logo{
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
#navbar .nav-link:focus {
color: #8e0000;
text-size-adjust: 1.4em;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin{
-webkit-animation: spin 1s ;
animation: spin 3s ;
animation-iteration-count: 1;
}
#-webkit-keyframes spin{
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin{
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 20px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
/* margin-left: 40px; */
}
/* ABOUT */
#about {
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 250px;
}
.section2 .row{
background: url("../images/improved-teamwork-and-collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 3px;
z-index: 1;
}
.section2 .card {
background-color: RGBA(33,37,41,.80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
z-index: 2;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0,0,0, 0.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0, 0.8));
}
.section2 .card-block {
z-index: 3;
font-weight: 520;
width: 50%;
font-size: 25px;
line-height: 50px;
padding: 60px;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 0px;
}
/* SKILLS */
#skills {
margin-bottom: 50px;
margin-top: 20px;
}
#skills .code-icon {
margin-top: 10px;
margin-bottom: 15px;
}
#skills .col {
letter-spacing: .6px;
}
#skills .container{
border-style: solid;
border-width: 3px;
z-index: 0;
color: #d4d4dc;
background-color: #1d1e22;
border-color: black;
border-radius: .5%;
line-height: 2.4em;
font-size: 1.4em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
padding-top: 5%;
padding-bottom: 5%;
}
#skills ul {
list-style: none;
}
/* PROJECTS */
#projects {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
margin-top: 70px;
margin-bottom: 50px;
}
#projects .row h1,
#projects .row .works-description {
text-shadow: .08px .5px black;
}
#projects .text-center {
max-width: 500px;
margin-bottom: 30px;
border-radius: 3px;
min-width: 300px;
box-shadow: 0 2px 8px 2px rgb(0, 0, 0);
padding: 15px;
background: #81888373;
text-shadow: .08px .5px black;
}
.works-description a {
color: #8e0000;
line-height: 36px;
margin-bottom: 36px;
width: 90%;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.works-description {
line-height: 36px;
margin-bottom: 36px;
width: 90%;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#projects .card-image-container {
width: 95%;
max-width: 420px;
max-height: 300px;
margin: 18px auto;
border-radius: 3px;
border: .5px solid #8e0000;
}
#projects .card-image-container
{
position:relative;
-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
-moz-box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8);
}
#projects .card-image-container:before, #projects .card-image-container:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius: 100px / 10px;
}
#projects .card-image-container:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
#media only screen and (max-width: 767px) {
#projects .card-image-container {
border-style: none;
box-shadow: none;
}
}
#projects img {
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
}
#media only screen and (max-width: 992px) {
#projects img{
width: 200px;
}
}
#media only screen and (max-width: 408px) {
#projects img {
width: 150px;
}
}
#projects .card-body {
padding: 0 1.25rem;
margin-bottom: 18px;
}
#projects .summary {
color: #8e0000;
}
#projects .card-summary {
font-size: 18px;
margin-bottom: 18px;
line-height: 36px;
}
#media only screen and (min-width: 992px) {
#projects .card-summary {
height: 180px;
}
}
#media only screen and (min-width: 768px) {
#projects .card-summary {
height: 150px;
}
}
/*FOR BUTTONS GO HERE: *https://bootsnipp.com/snippets/Gl29g*/
/* background: -webkit-linear-gradient(to right, #212529, #8e0000); /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to right,#212529, #8e0000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*font-size: 1.1rem; */
#projects .btn-rounded {
border-radius: 2px;
}
.btn-dark-moon {
background: #212529; /* fallback for old browsers */
color: rgba(255, 255, 255, 0.747);
border: 2px solid #eee;
position: relative;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
margin-right: 5px;
}
.btn-dark-moon:hover {
color: white;
border-width: 2.2px;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
}
.btn-darker-moon {
background: #212529; /* fallback for old browsers */
color: rgba(255, 255, 255, 0.747);
border: 2px solid #eee;
position: relative;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
margin-right: 5px;
}
.btn-darker-moon:hover {
color: white;
border-width: 2.2px;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
}
/*TESTIMONIALS*/
.testimonials {
margin: 50px auto;
color: #777;
margin-top: 115px;
margin-bottom: 100px;
text-shadow: .08px .5px black;
}
.testimonials h1 {
text-align: center;
font-weight: bold;
color: #8e0000;
padding-bottom: 10px;
text-transform: uppercase;
}
.testimonials .sayings {
font-size: 1.2em;
}
.testimonials h1::after {
content: '';
background: #8e0000;
display: block;
height: 3px;
width: 170px;
margin: 20px auto 5px;
}
.testimonials .row {
margin-top: 30px;
}
.col-md-4 {
margin: 40px auto;
}
.profile {
padding: 70px 10px 10px;
background-color: #353535;
border-radius: 3px;
/* box-shadow:0 0 20px rgba(0,0,0,0.8); */
position: relative;
}
.profile:before, .profile:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgb(105, 105, 105);
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.profile:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.profile img {
top: -60px;
position: absolute;
left: calc(50% - 60px);
border: 10px solid #e3e3e3;
}
.user {
width: 120px;
height: 120px;
border-radius: 50%;
}
.profile h3 {
font-size: 23px;
margin-top: 15px;
color: #790505;
}
.credentials {
font-weight: bolder;
}
.credentials span {
font-size: 12px;
color: #777;
}
.profile blockquote {
font-size: 16px;
line-height: 30px;
/* quotes: "\201C""\201D""\2018""\2019"; FOR USE WITH QUOTES TO SOLVE NESTED ISSUE WITH CODE BELOW */
}
.profile blockquote::before {
content: open-quote;
font-size: 50px;
position: relative;
color: #790505;
line-height: 20px;
bottom: -15px;
right: 5px;
}
.profile blockquote::after {
content: close-quote;
font-size: 50px;
position: relative;
color: #790505;
line-height: 10px;
bottom: -15px;
right: 5px;
}
.profile blockquote {
height: 161px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration: 1.8s">King.</span>
<br>
<div class="intro animated fadeInLeft" style="animation-delay: 3s; animation-duration: 2s">And I'm a full-stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration: 2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s; animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item focus">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor2">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor3">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor4">TESTIMONIALS
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor2"></a>
</div>
<section id="skills" class="section3">
<div class="row justify-content-center">
<div class="col-md-7 col-sm-12">
<div class="card text-center">
<div class="container">
<div class="card-title">
<h2>Tech I've learned:</h2>
</div>
<div class="col"><img class="code-icon" src="assets/images/code-solid.png" style="height: 12%; width: 12%; ">
<p>JavaScript, HTML, CSS, MongoDB, Express, Node.js, Bootstrap, mySQL, AWS Cloud Storage, and more...</p>
<h2>Tools I use:</h2>
<ul>
<li>Visual Studio Code</li>
<li>Github</li>
<li>Express</li>
<li>Linux</li>
<li>Axios</li>
<li>npm</li>
<li>Bash</li>
<li>Chrome Developer Tools</li>
<li>And more...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROJECTS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor3"></a>
</div>
<section id="projects" class="section4">
<div class="container">
<div class="row justify-content-center">
<h1>My Recent Projects</h1>
<p class="works-description">These are all self-directed projects. You can find more work on my
Github.<br> Below are just some of my most recent works. Let me know if you have any questions!
</p>
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<div class="text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://kingdomb.github.io/google-promo/">
<img src="assets/images/laptop-project-insertion-floating1SHADOW.png" alt="Google-Promo-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Google Home</h2>
</div>
<p class="card-tech card-text">JavaScript, HTML, CSS, Bootstrap</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
This project displays my use of javascript animations, and website design best practices. Firsts in this project included the added animations. </div>
<a href="https://kingdomb.github.io/google-promo/" class="btn btn-darker-moon btn-rounded">View
Demo</a>
View Code
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://kingdomb.github.io/Food_Searcher/">
<img src="assets/images/laptop-project-insertion-floating2SHADOW.png" alt="Nutrition-Searcher-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Nutrition Searcher</h2>
</div>
<p class="card-tech card-text">jQuery, JS, HTML, REST APIs, Regex, Materialize</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
This app returns nutritional value of foods, and calculates the length of time it takes to burn those calories.</div>
<a href="https://kingdomb.github.io/Food_Searcher/" class="btn btn-darker-moon btn-rounded">View
Demo</a>
<a href="https://github.com/KingdomB/Food_Searcher" class="btn btn-dark-moon btn-rounded">View
Code</a>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://raw.githubusercontent.com/KingdomB/Bamazon/master/bamazon.gif">
<img src="assets/images/laptop-project-insertion-floating3SHADOW.gif" alt="Bamazon-gif">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Bamazon CLI Store</h2>
</div>
<p class="card-tech card-text">JavaScript, Node.js, MySQL</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
Created an small Amazon-like storefront. The store interface prompts the user to select an item for purchase. After a quantity selection the inventory adjusts accordingly.</div>
View Demo
View Code
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://raw.githubusercontent.com/KingdomB/liri-node-app/master/liri-node-app.gif">
<img src="assets/images/laptop-project-insertion-floating4SHADOW.gif" alt="LIRI-Node-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>LIRI-Node-CLI</h2>
</div>
<p class="card-tech card-text"> JavaScript, Node.js, Axios, RESTful APIs, Inquirer</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
Command line user interface that receives search query inputs, and GET requests to return results from music, movie, and concert APIs</div>
View Demo
<a href="https://github.com/KingdomB/liri-node-app" class="btn btn-dark-moon btn-rounded">View
Code</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
So I have created a page and tried my best to use Bootstrap 4. But here is the thing, the page has all types of responsive errors, and one of the hallmarks of Bootstrap is that it is responsive. So, I would like some advice on the errors that I note below, please.
At 1199px X 836 both cards on the left in the "projects" section decrease vertically by maybe 20px.
-I would like all four cards to stay the same size and of course at some point the cards should display: block. But not at 1199px.
At 1124 the "about" section creates a top and bottom grey border, but what is more interesting is that 1027px X 836 the text wraps and things get ugly.
At 991px X 836px everything becomes messy. Navbar logo and logo-brand wrap and extend outside of the navbar container, about section text starts to push out of its container, and testimonials text starts overlapping.
I don't fully understand the css position methods and I believe this may be the issue, but if you can help me to get a better understanding of what I am doing wrong then I would greatly appreciate it.
Thanks
PS. I don't want to load down the post with my code so here is a link to the repo and the page:
repo
page
You must add bootstrap cdn link. Add this in head tag:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
and this in at the end of body:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
Or go to this page and download the bootstrap file if you want to use bootstrap also offline
So i have one "flipping card" and another bootstrap 4 card side by side like this: (I have edited the image to hide text)
However when this is tested on target mobile screen using chrome's dev consolde, The 2nd Card overlaps the flipping card and completely covers it. like this:
I have put the code inside the container, row and col-md-* like this:
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
....
<div class="col-md-8">
</div>
</div>
</div>
For full refrence, here is my full html and css code:
html:
<!-- start of third block -->
<div class="thirdblock">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-container">
<div class="card">
<div class="front">
<div class="cover">
</div>
<div class="user">
<img class="img-circle" src="images/...jpg" />
</div>
<div class="content">
<div class="main">
<h3 class="name">.</h3>
<p class="profession">.</p>
<p class="">..
<div class="text-center">
<i class="fa fa-mail-forward"></i> Flip
</div>
</p>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="content">
<div class="main">
<p> </p>
<p class="lead">
.</p>
<p> </p>
<br>
<div class="stats-container">
<div class="stats">
<h4>100+</h4>
<p>
Followers
</p>
</div>
<div class="stats">
<h4>10+</h4>
<p>
Following
</p>
</div>
<div class="stats">
<h4>100+</h4>
<p>
Projects
</p>
</div>
</div>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col-md-4 -->
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h4> </h4>
<p class="lead">
</p>
<img class="rounded mx-auto d-block" src="images/....png" />
<br>
</div>
</div>
</div>
</div><!-- end row -->
</div> <!-- end container -->
</div>
<!-- end third block -->
And the huge css code:
.thirdblock {
padding-top: 50px;
padding-bottom: 50px;
height: 100%;
font-family: 'Arima Madurai', cursive;
background-image: url("../images/image.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card {
font-family: 'Arima Madurai', Verdana;
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
}
/*Flipping Card Code*/
/*Flip Card Starts*/
.btn:hover,
.btn:focus,
.btn:active {
outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 900px;
-moz-perspective: 900px;
-o-perspective: 900px;
perspective: 900px;
margin-bottom: 3px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index: 3;
}
.back .btn-simple {
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card-container,
.front,
.back {
width: 100%;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
margin-bottom: 50px;
}
.card .cover {
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img {
width: 100%;
}
.card .user {
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img {
width: 100%;
}
.card .content {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 100%;
}
.card .back .content .main {
height: 100%;
}
.card .name {
font-family: 'Arima Madurai', cursive;
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5 {
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession {
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .fofooter-toter {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 10px 0 0;
text-align: center;
}
.card .footer-t .social-links {
font-size: 18px;
}
.card .footer-t .social-links a {
margin: 0 7px;
}
.card .footer-t .btn-simple {
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto {
font-family: 'Arima Madurai', cursive;
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container {
width: 100%;
margin-top: 50px;
}
.card .stats {
display: block;
float: left;
width: 33.333333%;
text-align: center;
}
.card .stats:first-child {
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child {
border-left: 1px solid #EEEEEE;
}
.card .stats h4 {
font-family: 'Arima Madurai', cursive;
font-weight: 300;
margin-bottom: 5px;
}
.card .stats p {
color: #777777;
}
Can someone please help me as in what am i messing up?
just add fixed height for your .card class, because of position absolute on .front and .back classes, card class won't take any height.
.card{
height:362px;
}
Remove the CSS for class
.front,.back
/* position: absolute; */
/* top: 0; */