Can any one help me to fix the image overlap.
Please is the HTML bootstrap card:
<div style="margin-top: 10px;">
<div class="container">
<div class="card-columns">
<div *ngFor="let issues of IssuesList">
<div class="card-deck">
<div class="card">
<div>
<img src="assets/img/icons8-verified-account-64.png" class="verified">
</div>
<img class="card-img-top"
src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/madrid.jpg" alt="Madrid">
<div class="card-body">
<h4 class="card-title">Madrid</h4>
<h6 class="card-subtitle mb-2">Spain</h6>
<p class="card-text">Madrid is home to two world-famous football clubs, Real Madrid and Atlético de Madrid.
Due to its economic output, high standard of living, and market size, Madrid is considered the major
financial centre of Southern Europe.</p>
See Gallery
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 days ago</small>
</div>
</div>
</div>
</div>
Css style:
.verified
{
position:absolute;
top: -20px;
left: -20px;
z-index: 2;
width:20%;
}
Output:
If you are talking about your badge not being visible whole time it is because there is no place left on top of the screen for them to be shown. To fix this push your .card down with .margin-top
.card {
margin-top: 50px;
}
Modify this value as you want to achieve desired look. If badges where not the problem come back so we can fix it
Related
how do I align all buttons at the bottom of the card? The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto' however the it's still not being positioned at the bottom?
I attached below the code structure for my cards including the styling for the card content and the buttons.
[](https://i.stack.imgur.com/eJLHT.png)
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<button class="card-btn card-btn-2">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-3"></div>
<div class="card-content">
<h2 class="card-header">Free PPEs for HCWs</h2>
<p class="card-text">Vice President Leni Robredo’s office continues its livelihood assistance projects as it turned over materials to a group of Bulacan sewers, who were tapped to make personal protective equipment (PPEs) who were tapped to make personal protective equipment (PPEs). </p>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
BACK TO TOP
</section>
`
The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto'. I can fix this by manually adjusting the button's margin but I think it's possible to adjust all buttons simultaneously.
I prepared a example in codepen:
https://codepen.io/isaksonn/pen/eYKzarW
section.container .card{display:flex;flex-direction:column;justify-content:space-between;height:600px;width:200px;border:1px solid gray;padding:10px}section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}section.container .card .card-content{height:100%;display:flex;flex-direction:column;justify-content:space-between}
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
<div class="divAdded">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
</div>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<button class="card-btn card-btn-2">Read more<span>→</span></button>
</div>
</div>
BACK TO TOP
</section>
section.container .card{height:600px;width:200px;border:1px solid gray;padding:10px}
section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}
.btn{
text-align: center;
margin: 10px 0;
}
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
<div class="divAdded">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
</div>
<p class="btn"><button class="card-btn">Read more<span>→</span></button></p>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<p class="btn"><button class="card-btn card-btn-2">Read more<span>→</span></button></p>
</div>
</div>
BACK TO TOP
</section>
You can try this..
add button element in 'p' and you can add class in 'p' element and than go to css file and style
I have a website I'm making updates to, and one of the updates is making an image in the center larger without causing the text and alignment to change. The pictures below are what I'm working on and what I want to avoid.
Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images..
HTML
<div class="padding">
<div class="container">
<div class="row text-center mt-30">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons" ><img src="images/<?php echo $icons[2]["icon_img"]; ?>"></div>
<div class="featureitem img-item">
<!-- <strong >Empowerment</strong> -->
<p class="">An innovative approach that drives the discovery of new medicines. By collaborating with Circuit Clinical’s network, we have empowered individuals to take charge of the journey to finding cures through their participation.</p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons-middle" >
<img src="images/<?php echo $icons[0]["icon_img"]; ?>">
</div>
<div class="featureitem img-item">
<!-- <strong >Engagement</strong> -->
<p class="">We are an Integrated Research Organization [IRO] dedicated to optimizing the clinical research experience by delivering a comprehensive research program into our physicians practices. We make clinical research more manageable with our dedicated team of research professionals who match clinical trials to a physician’s areas of interest, assist with patient recruitment and study visits while filing all regulatory requirements.</p>
</div>
</div>
<!-- <div class="border"></div> -->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons" ><img src="images/<?php echo $icons[1]["icon_img"]; ?>"></div>
<div class="img-item">
<!-- <strong >Enablement</strong> -->
<p class="">Transforms the experience of finding and participating in clinical trials for patients everywhere. It empowers prospective patients to confidently select a trial site trusted by their peers. Sites, sponsors and CROs leverage TrialScout<sup>TM</sup> to share their story and engage patients to consider participating in their trials.</p>
</div>
</div>
<!-- <div class="border"></div> -->
<div class="col-md-1"></div>
</div>
</div>
</div>
CSS
.text-icons img{
clear: both;
height: auto;
max-width: 300px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
.text-icons-middle img{
clear: both;
height: auto;
max-width: 300px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
I think you can use "position" method to avoid this problem, just set the "position" of parent div to "relative" and the div of "text" to "absolute", then set the text to have a fixed-top value. So when you increase the size of the picture, it wont effect the position of below text. I had made a simple program for your reference:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<style>
#parent_div{
position: relative;
}
#div_image{
position: absolute;
top:0px;
left:0px;
background-color: green;
height:100px;
width: 300px;
}
#div_text{
position: absolute;
top:150px;
left:0px;
size:5px;
height:100px;
width: 300px;
}
#button{
position: absolute;
left:400px;
}
</style>
</head>
<body>
<div id="parent_div">
<div id="div_image">
<img src="">
<div>
<div id="div_text">
Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images..
</div>
</div>
<button id="button" type="button" onclick="inc_size()">Increase size</button>
<script>
function inc_size(){
var test = document.getElementById("div_image").style.height = "150px";
}
</script>
</body>
</html>
Though question is trivial and asked multiple time, but my difficulty arises from using Bootstrap 4 may be or some conflicts.
I want two divs up and down, fixed to bottom. Centered align with text
centered align too.
here is code:
<div class="row ">
<div class="myfooter text-center" style="display: inline-table;">
<div class="col-lg-12 col-md-12 ">
<div class="col-lg-6 col-md-6">
<span class='label label-default'>Copyright © 2018 Some Institute of Sciences, City, Country</span>
</div>
<div class="col-lg-6 col-md-6">
<span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
</div>
</div>
</div>
</div>
And style is:
.myfooter {
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
background-color: #21262929;
}
Issues:
If I change style="display: inline-table;" to anything else like block one of the div vanishes.
As I am not a designer so please give something ready to use. Thanks
Note: Bootstrap footer class is causing some issue, I can't trace.
You can simply do this:
.myfooter {
background-color: #21262929;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="myfooter container-fluid position-fixed fixed-bottom">
<div class="row text-center">
<div class="col-12">
<span class='label label-default'>Copyright © 2018 Some Institute of Sciences, City, Country</span>
</div>
<div class="col-12">
<span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
</div>
</div>
</div>
And by best advice is to read more about how boostrap works and also check the utilities classes that will avoid you adding your own style.
I am trying to print the contents of a modal but its showing big gaps in the print preview and things that should be hidden.
Despite adding hidden to particular things they still show up in the preview.
There is also a hidden div to prevent swiping on the map when scrolling which is why i thing th first page of the preview looks blank.
#media print {
#overlay, #close-modal-button, #print-button * {
visibility: hidden;
display: none !important;
}
#map-modal * {
visibility: visible;
}
#map-modal, #map-modal {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
overflow: visible!important;
display: block;
}
}
<div id="map-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: true}]" [materializeActions]="modalActions">
<div id="map-modal-content" class="modal-content">
<h4 id="modal-title">Map of the area and directions</h4>
<div class="container center">
<div class="row">
<div id="overlay" class="overlay" onClick="style.pointerEvents='none'">
</div>
<div class="center">
<iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1T1AFckKqP4J38fIJswg8uEr42hyB3R5y&ll=51.06791175093598%2C0.21307320000005348&z=11" allowfullscreen></iframe>
</div>
</div>
<hr>
<p id="modal-text"><b>St Dunstan’s Church, Mayfield TN20 6AB</b><br>Mayfield village is signposted on the A267 and the church is situated in the middle of the village on the High Street.</p>
<div class="row">
<div class="container center">
<div class="col s12">
<img id="map-image" class="center materialboxed" src="./assets/Map1.png">
</div>
</div>
</div>
<p id="modal-text">The car park is sign posted on the right-hand side of the High Street as you are driving up the hill. The easiest way to get to the church from the car park is to walk through the car park for The Middle House as seen on the map. The marked car park in Mayfield is free.</p>
<hr>
<p id="modal-text">The drive from St Dunstan’s Church to the reception at Juddwood Farm is approximately 30 minutes.</p>
<p id="modal-text"><b>Juddwood Farm, Haysden Lane, Tonbridge TN11 8AB </b></p>
<div class="row">
<div class="overlay" onClick="style.pointerEvents='none'">
</div>
<iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll=51.096412867708054%2C0.240690000000086&z=11" allowfullscreen></iframe>
</div>
<div class="row">
<div class="container center">
<div class="col s12">
<img id="map-image" class="materialboxed" src="./assets/Map2.png">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container center">
<a id="print-button" onClick="window.print()" class="black waves-effect waves-light btn z-depth-3" href=""><i class="material-icons right">print</i>Print this page</a>
</div>
</div>
<div class="modal-footer transparent">
<a id="close-modal-button" class="right transparent btn-flat" (click)="closeModal()">Close</a>
</div>
</div>
I've googled around a fair amount but cant see why. Here is a gif of the print preview https://imgur.com/a/Hnfcr
It looks like your declaration #print-button * is looking for a child of #print-button, rather than #print-button itself.
Also, it's unclear why you have duplicated #map-modal, #map-modal { ... Did you intend to select #map-text ?
I have a container with 4 rows each row has two columns in 4:8 ratio.
For each column it works perfectly for screens with width more than 1080px, for less than this the content overlaps.
What i want to do, is make all the columns turn into rows with a full width of the screen.
If anyone have any recommendation to get better results please help me.
I have found many questions for people having the same issue and tried their solution but nothing worked for me.
.proctitleleft {
font-size: 20px;
position: absolute;
left: 90px;
top: 20px;
bottom: 20px;
}
.procimageleft {
position: relative;
margin-bottom: 40px;
margin-right: 90px;
margin-top: 20px;
}
.procimageright {
position: relative;
margin-bottom: 40px;
margin-left: 90px;
}
.procparagleft1 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
.procparagleft2 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
.procparagleft3 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="processcontainer">
<div class="arw_tab_title">
<div class="tab_title">
<h2 class="title">The Process</h2>
<p class=""></p>
</div>
<div class="tab_sub_title">
<h2 class="title">our perfect process</h2>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="proctitleleft">
<h3>1-Far far away</h3>
</div>
<div class="procparagleft1">
<p>It all started with a farmer and his extraordinary efforts to grow what people later called the best cotton in town
<br>To Bangladesh we went to see if that was true.And it was!<br>
</p>
</div>
</div>
<div class="col-xs-4">
<div class="procimageleft">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process1.png">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="procimageright">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process2.png">
</div>
</div>
<div class="col-xs-8">
<div class="proctitleleft">
<h3>2-Lavish Studio left their mark </h3>
</div>
<div class="procparagleft2">
<p>Oh buddy! What can I say?
<br>Working around the clock to deliver powerful yet very elegant designs that was approved by an internal community before seeing the light of day<br>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="proctitleleft">
<h3>3-Complete the artwork</h3>
</div>
<div class="procparagleft3">
<p>Partnering up with the same factory that deal with Adidas, Reebok and Name, we were able to transform an idea into a very big powerful reality
</p>
</div>
</div>
<div class="col-xs-4">
<div class="procimageleft">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process3.png">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="procimageright">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process4.png">
</div>
</div>
<div class="col-xs-8">
<div class="proctitleleft">
<h3>4- Quality meets perfection
</h3>
</div>
<div class="procparagleft2">
<p>We stand by our products because we’re confident in what we deliver.
<br> That’s why we designed an unsurpassed shopping and unboxing experience to befit such creations
<br>
</p>
</div>
</div>
</div>
</div>
use col-md-4 and col-md-8 instead of col-xs-* so you have 4:8 ratio above 992px width and full col-width under 992px. You don't have to do it by your own. It's the standard behavior of bootstrap.
see https://getbootstrap.com/css/#grid-media-queries for further details
use three classes col-md-4, col-sm-4 and col-xs-12, last one for smallest devices full width div tag.