I have this code, it is a header with LWC, divide into three parts, but the problem I have that my display is not responsive, each part points to the other The part 2 and 2 overlap the part 1.
How can I fixe this .
<template>
<lightning-card>
<div class="slds-page-header">
<div class="slds-page-header__row">
<template if:true={MyObject.data}>
<div class="slds-m-around_medium ">
<lightning-layout style="width:100%;">
<div class="slds-grid slds-wrap">
<div class="slds-size_1-of-3">
<lightning-layout-item style="width:20%" >
<div class="slds-m-around_medium styleStatut">
<img style="height: 20px; display: block; margin-top: -15px; " src={statut} >
</div>
<div class="position1">
<tr><span class="titlePosition"><h1><strong>{Name}<br /> </strong></h1></span></tr>
<br><br>
<span class="titlePosition1"><h1><strong>{Formula__c}<br /> </strong></h1> </span>
<br><br>
<span class="titlePosition2"><h1><strong>{Type__c}<br /></strong></h1> </span>
</div>
</lightning-layout-item>
</div>
</div>
<div class="slds-grid slds-wrap">
<div class="slds-size_1-of-3">
<lightning-layout-item style="width:45%" >
<lightning-spinner if:true={isLoading} alternative-text="Loading" size="small"> </lightning-spinner>
<template if:true={imageurl}>
<img src={imageurl} style="height: 185px; display: block;
margin-top: -30px; width: 350px; max-width: initial;
"/>
</template>
<div style="margin-top: -65px; ">
<div class="slds-m-around_small ">
<lightning-file-upload name="fileUploader" accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished} onchange={saveFile} disabled={disableImport}>
</lightning-file-upload>
</div>
<div class="slds-m-around_small">
<template if:true={fileName}>
{fileName}
</template>
</div>
</div>
</lightning-layout-item>
</div>
</div>
<div class="slds-grid slds-wrap">
<div class="slds-size_1-of-3 ">
<lightning-layout-item style="width:35%" >
<lightning-map style="height: 185px; width: 60px; margin-top: -30px; "
map-markers={mapMarkers}
zoom-level={zoomLevel}
center={center}
onmarkerselect={handleMarkerSelect}
selected-marker-value={selectedMarkerValue}
>
</lightning-map>
<div class="StyleAdress">
<p >{Country}</p><br>
<p>{City}</p><br>
<p>{Street}</p></div>
</lightning-layout-item>
</div>
</div>
</lightning-layout>
</div>
</template>
</div>
</div>
</lightning-card>
</template>
==> CSS
.StyleHeader{
color: white;
background-color: white;
}
.titlePosition2{
color: red;
font-size: 160%;
margin-top: -12%;
margin-left: 8%;
}
.slds-page-header{
background-color: white;
}
.styleStatut{
margin-top: 0.5%;
margin-left: -5%;
}
.position1{
color: black;
font-size: 160%;
margin-top: -12%;
margin-left: 8%;
/* position: absolute; */
}
.StyleAdress{
color: rgba(0, 153, 255, 0.973);
font-size: 120%;
margin-top: 15%;
}
New Version of the code :
<template>
<lightning-card>
<div class="slds-page-header">
<template if:true={MyObject.data}>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<div>
<div class="slds-m-around_medium styleStatut">
<img style="height: 20px; display: block; margin-top: -18px; " src={statut} >
</div>
<div><br>
<div class="position1">
<div>
<h1><strong>{Name}</strong></h1>
</div><br><br></div>
<div class="position1">
<div>
<h1><strong>{Formula__c}</strong></h1>
</div><br><br></div>
<div class="titlePosition2">
<div>
<h1><strong>{Type__c}</strong></h1>
</div>
</div>
</div>
</div>
</div>
<div class="slds-col">
<div>
<lightning-spinner if:true={isLoading} alternative-text="Loading" size="small"> </lightning-spinner>
<template if:true={imageurl}>
<img src={imageurl} style=" display: block;
min-width: 120%;
width: 120%;height: 120%;
"/>
</template>
</div>
</div>
<div class="slds-col">
<div>
<div >
<lightning-file-upload name="fileUploader" accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished} onchange={saveFile} disabled={disableImport}>
</lightning-file-upload>
</div>
<div style="margin-top: 50%; margin-left:20%">
<template if:true={fileName}>
{fileName}
</template>
</div>
</div>
</div>
<div class="slds-col">
<div style="height: 50%; width: 60% ">
<lightning-map
map-markers={mapMarkers}
zoom-level={zoomLevel}
center={center}
onmarkerselect={handleMarkerSelect}
selected-marker-value={selectedMarkerValue}
>
</lightning-map>
</div>
</div>
<div class="slds-col">
<div>
<div class="StyleAdress">
<p >{Country}</p><br>
<p>{City}</p><br>
<p>{Street}</p>
</div>
</div>
</div>
</div>
</template>
</div>
</lightning-card>
</template>
Now it works with this code except the image I upload, when I reduce the page it goes up and its size decreases. What can I do for this?
