I want to add an icon but it doesn't show up in the web page, and yes I have downloaded 'fontawesome for the web'.
I've inspected the code and it say that the height and the width are 0x0 and I can't change it because "The display: inline property prevents width from having an effect. Try setting display to something other than inline."
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End Global Rules */
header {
padding: 20px;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
<header>
<div class="container">
<div>
<img class="logo" src="/images/logo.png" alt="" />
</div>
<div class="Links">
<span class="icon-bar">
<i class="fa-solid fa-ba-staggered"></i>
</span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</header>
I have tried to inspect the code and I didn't found anything except what I've said
The easiest, and probably best, way to add any icon is as an svg element. You simply download the svg then paste in to your HTML. You can download fontawesome icons (top right on their webpage). Example:
svg {
height: 96px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z"/></svg>
There is no fontAwesome icon named as fa-ba-staggered
You might be looking for:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fa-solid fa-bars-staggered"></i>
You can search on fontawesome.com/search website for any icons that you need.
Ref: https://fontawesome.com/icons/bars-staggered?s=solid&f=classic
I cannot make the inside div to get the whole available space. The idea is to have a "tile" at the middle of the screen and all the content inside, taking all available space minus the padding, no matter the size of the screen, scrolled if necessary. The title is displayed vertically at the side of the tile. I cannot make it work - either the content is small and does not take all available space or takes to much space and does not scroll on small screen but overflow the tile. Adding "overflow: scroll" to the "wrapper" class hides the title. I am going in rounds.
<div class="block block_tile">
<section>
<div class="wrapper">
<h3 class="title">My Service</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg>
<div class="content">
<h1>Welcome to Our page. Please log in.</h1>
<button type="submit" name="_continue" class="btn btn-primary">Login</button>
<p>
You can register here.
</p>
</div>
</div>
</section>
</div>
css:
.wrapper {
display: flex;
flex-direction: column;
background-color: $white;
margin: auto;
min-width: 72rem;
max-height: 85vh;
width: 72rem;
min-height: 60rem;
position: absolute;
top: 20%;
border: 4px solid $primary;
padding: 6rem 8rem 6rem 8rem;
color: $dark;
font-size: small;
.content {
display: flex;
flex-direction: column;
justify-content: space-around;
max-height: 100%;
overflow: scroll;
overflow-x: hidden;
h1+p {
margin-top: -2.5rem;
margin-bottom: 5rem;
}
&::-webkit-scrollbar {
display: none;
}
h2 {
margin-bottom: 2rem;
font-style: normal;
font-weight: normal;
font-size: 1.6rem;
line-height: 3rem;
text-align: justify;
}
}
.title {
font-weight: 600;
font-size: 2.5rem;
line-height: 3.8rem;
color: $white;
position: absolute;
bottom: -.5rem;
left: 0;
transform: rotate(270deg);
transform-origin: 0 4rem;
}
My problem is when I'm going to level the icons side by side, even though I put the margin and padding I've already turned many sites, in an attempt to solve it I created this bar where the buttons are aligned as well as implemented an animation on top of them, but if I put the icons together in front of this bar, it loses the animation's integrity.
My goal is to join the icons in the upper right corner...... besides twitter/tumblr I still have 3 others...
I appreciate any and all help, I'm a beginner in programming.
/*icones tumblr, insta*/
.icones i {
display: inline-block;
width: 100%;
height: 30px;
padding: 0px 20px;
margin: 0px 5px;
}
ul {
position: absolute;
top:20%;
left: 45%;
transform: translate(-80%, -70%);
margin: 0%;
padding: 20px 0px;
background: rgb(228, 211, 228);
display: flex;
border-radius: 15px;
}
ul li a{
list-style: none;
text-align: center;
display: block;
}
#tumblr {
width: 25px;
padding-left: 700px;
}
#twitter {
width: 45px;
padding-left: 600px;
margin-top: 10px;
margin-bottom: 2em;
}
.container {
display: grid;
grid-template-columns: 4fr 2fr;
grid-template-rows: 100px 50px;
grid-template-columns: auto auto auto auto auto auto;
}
#navbar {
display: flex;
flex-direction: column;
align-items: center;
grid-column: 1 / 5;
}
<nav class="container" style="background-color:#7B68EE; height:60px; width: 100%; text-align: center; border: 3px solid">
<div class="navbar">
<div id="nave">
<p style="text-align:right; color:rgb(248, 233, 185)">
<ul>
<li> Folders</li>
<li> Files</li>
<li> Content</li>
<li> Home</li>
<li> Documents </li>
<li></li>
</ul>
<div class="navbar2">
<a href="#" class="hrv-icon-bounce">
<div id="tumblr">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"
class="svg-inline--fa fa-tumblr fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5
10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>
</div>
</a>
<a href="#" class="hrv-icon-bounce">
<div id="twitter">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299
49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828
46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
</div>
</a>
</p>
</div>
</div>
</div>
</nav>
I've tidied and simplified your code and added some CSS styling to make it display how I think you probably want it. I've assumed you want the text menu centred and the social icons pushed to the right. I've added comments to the CSS so hopefully you can follow what I have done.
I've made the two parts of the nav bar into separate unordered lists (ul).
I am using a flex-box layout to position and size those two sections.
I set the text menu to be flex: 1 so it expands to fill most of the space in the nav bar. This pushes the social icons to the right hand end of the bar.
One final piece of advice to you as you begin programming:
Get into the habit of being consistent with your indenting. Keeping your code tidy will help you as you develop your program or website. And it will help anyone else who may need to work on it later.
nav.navbar {
/* Use a flex-box layout to put the menu and icons side by side */
display: flex;
/* Centre the flex children (the ULs) vertically in the flex box */
align-items: center;
background-color:#7B68EE;
height:60px;
width: 100%;
text-align: center;
border: 3px solid;
}
nav.navbar .menu {
/* Removes standard list styling. Hide bullets, remove padding. */
list-style: none;
padding: 0;
/* Make menu expand to fill most of the space in the menubar */
flex: 1;
}
nav.navbar .menu li {
/* Makes menu list items display horizontally rather than vertically */
display: inline;
}
/* Add some spacing between the menu items */
nav.navbar .menu li:not(:first-child) {
padding-left: 1em;
}
nav.navbar .social-icons {
/* Removes standard list styling. Hide bullets, remove padding. */
list-style: none;
padding: 0;
}
nav.navbar .social-icons li {
/* Makes social list items display horizontally rather than vertically */
display: inline;
}
nav.navbar .social-icons svg {
width: 30px;
height: 30px;
}
<nav class="navbar">
<ul class="menu">
<li>Folders</li>
<li>Files</li>
<li>Content</li>
<li>Home</li>
<li>Documents</li>
</ul>
<ul class ="social-icons">
<li>
<a href="#" class="hrv-icon-bounce">
<svg class="tumblr" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5
10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="hrv-icon-bounce">
<svg class="twitter" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img"viewBox="0 0 512 512">
<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299
49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828
46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
</li>
</ul>
</nav>
This is a simple used automobile sales platform for a dealer who doesn't want a lot of interactivity, just a listing of the vehicles and prices in a visual manner similar to a print magazine (click on Run Code Snippet and View Full page to see it as it looks currently):
body {
font-family: Helvetica, sans-serif;
}
header, footer {
background-color: #7690AC;
color: #FFFFFF;
padding: 20px;
padding-bottom: 20px;
}
.content {
padding: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.grid {
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: center;
}
.grid > article {
border: 1px solid #333;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
min-height: 25em;
top: -10px;
}
.grid > article img {
max-width: 100%;
margin-bottom: 12px;
}
.text {
font-size: 1em;
transform: scaleX(1.2) scaleY(1);
margin-left: 25px;
width: 270px;
}
.text {
padding: 0 10px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
h3.price {
text-align: center;
}
.cards {
grid-template-columns: repeat(2, 1fr);
border-collapse: collapse;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
p.address, p.phoneno {
font-size: 18px;
font-weight: 900;
line-height: 12px;
}
☎:before {
font-size: 14px;
}
<header>
<h1>YOURMOTORHOMES</h1>
<h2>Axtley Road, Penderton XX1 1XA</h2>
<h2>01634 00000</h2>
</header>
<div class="content">
<p>Welcome to YourMotorhomes!</p>
</div>
<main class="grid">
<article>
<img src="https://i.imgur.com/PApYyjj.jpg" alt="Elddis Autoquest">
<div class="text">
<p><b>2020 70 ELDDIS AUTOQUEST 194 2.2 HDi 140 LOW PROFILE MOTORHOME PEUGEOT BOXER CHASSIS</b>
4 berth, end washroom, white, 100 litre fresh water, 70 litre waste water, 3 ring hob, OG cooker, 155 litre fridge, 600 miles, almost as new, <b class="price">£44895</b></p>
</div>
</article>
<article>
<img src="https://i.imgur.com/h7Cujxy.jpg" alt="Dethleffs Esprit"><em>Image for illustration purposes only</em>
<div class="text">
<p><b>2014 64 DETHLEFFS i6810 ESPRIT 2.3 MULTIJET 130 A-CLASS FIAT DUCATO MOTORHOME</b>
4 berth, 4 belted seats A-class motorhome finished in Diamodn White, fixed single bed layout, 3 ring cooker, fully loaded spec, 28,000 miles <b class="price">£62115</b></p>
</div>
</article>
<article>
<img src="https://i.imgur.com/TfuaqVa.jpg" alt="Burstner Aviano">
<div class="text">
<p><b>2009 59 BURSTNER AVIANO i725 3.0 MULTIJET 180 FIAT TD</b>
4 berth, gold, island bed layout, 3 ring hob, 150 litre fridge, 7.45m length, 2.30m width <b class="price">£44995</b></p>
</div>
</article>
<article>
<img src="https://i.imgur.com/oUWFVub.jpg" alt="Burstner Nexxo">
<div class="text">
<p><b>2009 58 BURSTNER NEXXO FAMILY A645 2.2 TDCi</b>
6 berth, 6 belted seats, end bedroom, blue, Layout - Over Cab Double, Centre Dinette Double, Rear Bunk beds, 2 Owners from New, Good Service History, Cab Air Conditioning, Gaslow Refillable LPG System, Truma Blown Air Combination Boiler, HPI Clear, Roof Rails, Large Garage - if not using bottom bunk, Awning,MOT 17/12/2021, 11 Service Stamps in the book, Last Damp check 01/21, GVW 3500kg, Length 6.56m, Width 2.30m, Height 3.0m, only 20,747 miles, registered 30/01/2009, MoT due in Oct' 21. DUE THIS WEEK. A GREAT EXAMPLE OF THIS BURSTNER MOTORHOME, MUST BE SEEN NOW, YOU WILL NOT FIND BETTER
<b class="price">£35000</b></p>
</div>
</article>
</main>
<footer>
content
</footer>
Functionally, it works, but I want to try and achieve three things; the within grid being all the same size, and also the images being the same size within the article (I've got it at max-width:100%) so it's not creating uneven sizes (if you view the design at full screen) and preventing text overflow by auto-resizing the font if there's a lot of text without needing a scrollbar or overflow: hidden; in the CSS.
I would be grateful if anyone can help, as this template's working, not quite production-ready, but it's getting there slowly.
Try this -
1. Remove transform property form .text class and
2. Remove align-items from .grid class.
.text {
font-size: 1em;
/* transform: scaleX(1.2) scaleY(1); */ // Comment it.
margin-left: 25px;
width: 270px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
/* align-items: center; */ //Comment it.
}
The given code arranges the articles in a grid which adjusts to the viewport width OK but these things are required:
The height of each article should be the same
The height of each image should be the same
The text should have font-size adjusted so that it always fits within the article size
Taking each requirement in turn:
Set the height of article to something. It depends on what you think would be sensible bearing in mind the maximum amount of text a van may require - to ensure its text will still be readable. The snippet below sets it at 30em (based on the code in the question having a minimum height of 25em)
Although we want the height of each img to be the same, say a % of the article height, we need to ensure that the whole of the img is always viewable, without distortion or cropping. This snippet changes the HTML so that the img element becomes a div with fixed dimensions and the image is used as a background, centered both horizontally and vertically and with size contain. (see below for alternative).
Altering the font size I think requires Javascript. This snippet looks at the height of the text div and if it's too tall alters the font size until it fits. You may want to put a different limit on it so that it is always readable, even if that means occasionally the user having to scroll.
const articles = document.querySelectorAll('.grid > article');
articles.forEach(article => {
const articleH = article.offsetHeight;
let h = article.querySelector('.text').offsetHeight;
var fontSize = 0.9;
while (h > articleH/2) {//NOTE assumes the img is 50% alter if it is something else
article.querySelector('.text').style.fontSize = fontSize + 'em';
h = article.querySelector('.text').offsetHeight;
if (fontSize <= 0.2) break;
fontSize = fontSize - 0.05;
}
});
body {
font-family: Helvetica, sans-serif;
width: 100vw;
}
header, footer {
background-color: #7690AC;
color: #FFFFFF;
padding: 20px;
padding-bottom: 20px;
}
.content {
padding: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.grid {
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: center;
}
.grid > article {
border: 1px solid #333;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
/* min-height: 25em; */
height: 30em; /* ADDED */
top: -10px;
}
.grid > article .img {
width: 100%;
height: 50%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat no-repeat;
margin-bottom: 12px;
}
.text {
font-size: 1em;
/*transform: scaleX(1.2) scaleY(1);*/
margin-left: 25px;
width: 270px;
}
.text {
padding: 0 10px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
h3.price {
text-align: center;
}
.cards {
grid-template-columns: repeat(2, 1fr);
border-collapse: collapse;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
p.address, p.phoneno {
font-size: 18px;
font-weight: 900;
line-height: 12px;
}
☎:before {
font-size: 14px;
}
<header>
<h1>YOURMOTORHOMES</h1>
<h2>Axtley Road, Penderton XX1 1XA</h2>
<h2>01634 00000</h2>
</header>
<div class="content">
<p>Welcome to YourMotorhomes!</p>
</div>
<main class="grid">
<article>
<div class="img" style="background-image: url(https://i.imgur.com/PApYyjj.jpg)" alt="Elddis Autoquest"></div>
<div class="text">
<p><b>2020 70 ELDDIS AUTOQUEST 194 2.2 HDi 140 LOW PROFILE MOTORHOME PEUGEOT BOXER CHASSIS</b>
4 berth, end washroom, white, 100 litre fresh water, 70 litre waste water, 3 ring hob, OG cooker, 155 litre fridge, 600 miles, almost as new, <b class="price">£44895</b></p>
</div>
</article>
<article>
<div class="img" style="background-image: url( https://i.imgur.com/h7Cujxy.jpg" alt="Dethleffs Esprit)"></div><em>Image for illustration purposes only</em>
<div class="text">
<p><b>2014 64 DETHLEFFS i6810 ESPRIT 2.3 MULTIJET 130 A-CLASS FIAT DUCATO MOTORHOME</b>
4 berth, 4 belted seats A-class motorhome finished in Diamodn White, fixed single bed layout, 3 ring cooker, fully loaded spec, 28,000 miles <b class="price">£62115</b></p>
</div>
</article>
<article>
<div class="img" style="background-image: url(https://i.imgur.com/TfuaqVa.jpg)" alt="Burstner Aviano"></div>
<div class="text">
<p><b>2009 59 BURSTNER AVIANO i725 3.0 MULTIJET 180 FIAT TD</b>
4 berth, gold, island bed layout, 3 ring hob, 150 litre fridge, 7.45m length, 2.30m width <b class="price">£44995</b></p>
</div>
</article>
<article>
<div class="img" style="background-image: url(https://i.imgur.com/oUWFVub.jpg);" alt="Burstner Nexxo"></div>
<div class="text">
<p><b>2009 58 BURSTNER NEXXO FAMILY A645 2.2 TDCi</b>
6 berth, 6 belted seats, end bedroom, blue, Layout - Over Cab Double, Centre Dinette Double, Rear Bunk beds, 2 Owners from New, Good Service History, Cab Air Conditioning, Gaslow Refillable LPG System, Truma Blown Air Combination Boiler, HPI Clear, Roof Rails, Large Garage - if not using bottom bunk, Awning,MOT 17/12/2021, 11 Service Stamps in the book, Last Damp check 01/21, GVW 3500kg, Length 6.56m, Width 2.30m, Height 3.0m, only 20,747 miles, registered 30/01/2009, MoT due in Oct' 21. DUE THIS WEEK. A GREAT EXAMPLE OF THIS BURSTNER MOTORHOME, MUST BE SEEN NOW, YOU WILL NOT FIND BETTER
<b class="price">£35000</b></p>
</div>
</article>
</main>
<footer>
content
</footer>
An alternative to contain on the background size could be cover - if you were absolutely sure that the motor was central in each image and the aspect ratio such that it would fit OK. This runs a risk that not all the van will show though, but it gives a more consistent solid look to the top part of the article.
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
I have a problem with HTML/CSS. I'm trying to finish a challenge but i can't keep SVGs images in my div.
I will post screenshots of the attempted result then what i got.enter image description here
And here my code : `
html {
font-family: 'Poppins', sans-serif;
font-weight: 200;
background: hsl(0, 0%, 98%);
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
header {
width: 40%;
text-align: center;
}
header h1 {
font-weight: 200;
}
header strong {
font-weight: bold;
}
main {
height: 80vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.card {
position: static;
display: flex;
flex-direction: column;
background: white;
border-radius: 9px;
box-shadow: 8px 1px 20px grey;
padding-left: 40px;
padding-right: 40px;
margin: 20px;
}
.card:nth-child(1) {
border-top: 5px solid hsl(180, 62%, 55%);
position: relative;
top: 50%;
}
.card:nth-child(2) {
border-top: 5px solid hsl(0, 78%, 62%);
}
.card:nth-child(3){
border-top: 5px solid hsl(212, 86%, 64%);
position: relative;
top: 50%;
}
.card:nth-child(4) {
border-top: 5px solid hsl(34, 97%, 64%);
grid-column: 2;
}
.card svg {
position: absolute;
bottom: 10%;
right: 10%;
}
#media screen and (max-width:360px) {
html {
font-size: 12px;
}
header {
width: 100%;
margin-bottom: 10%;
}
main {
height: auto;
display: block;
}
.card {
height: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,200;0,400;0,600;1,200;1,400;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<header>
<h1>
Reliable, efficient delivery<br/>
<strong>Powered by Technology</strong>
</h1>
Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful
</header>
<main>
<div class="card">
<h2>Supervisor</h2>
Monitors activity to identify project roadblocks
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#676E74" d="M56.842 7.158c-9.526-9.563-24.902-9.525-34.428 0-8.025 8.026-9.45 20.44-3.525 30.003l-2.513 2.55-1.356 6.144 4.214 4.214 5.093-2.408 2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428z"/><path fill="#474F54" d="M24.327 47.661l2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428l-40.26 40.26 2.652 2.651 5.093-2.408z"/><path fill="#64E1DC" d="M54.213 9.787a20.56 20.56 0 00-14.585-6.041C28.236 3.746 19 12.98 19 24.372a20.564 20.564 0 006.041 14.586 20.564 20.564 0 0014.586 6.04c11.392 0 20.626-9.234 20.626-20.626a20.56 20.56 0 00-6.041-14.585z"/><path fill="#00C8C8" d="M60.254 24.372a20.56 20.56 0 00-6.041-14.585l-29.17 29.17A20.564 20.564 0 0039.627 45c11.392 0 20.626-9.235 20.626-20.627z"/><path fill="#EFEFF4" d="M56.239 23.41c-.184-.307-2.98-4.914-7.281-8.368-2.63-2.113-5.822-3.796-9.33-3.796-9.242 0-16.314 11.669-16.61 12.165l-.576.961.575.961c.184.309 2.98 4.916 7.28 8.37 2.631 2.112 5.823 3.795 9.33 3.795 9.243 0 16.315-11.668 16.612-12.165l.574-.96-.574-.962z"/><path fill="#DADAE5" d="M56.239 25.333l.574-.96-.574-.962c-.184-.308-2.98-4.915-7.281-8.369l-18.66 18.66c2.63 2.113 5.822 3.796 9.33 3.796 9.242 0 16.314-11.668 16.61-12.165z"/><path fill="#64E1DC" d="M43.604 20.396a5.607 5.607 0 00-3.976-1.65 5.632 5.632 0 00-5.626 5.626c0 1.551.631 2.958 1.65 3.976a5.609 5.609 0 003.976 1.65 5.632 5.632 0 005.625-5.626c0-1.55-.63-2.957-1.649-3.976z"/><path fill="#00C8C8" d="M45.253 24.372c0-1.55-.63-2.957-1.649-3.976l-7.952 7.952a5.608 5.608 0 003.976 1.65 5.632 5.632 0 005.625-5.626z"/><path fill="#676E74" d="M40.954 23.046a1.876 1.876 0 10-1.326 3.2 1.876 1.876 0 001.326-3.2z"/><path fill="#474F54" d="M41.503 24.372c0-.517-.21-.986-.55-1.326l-2.65 2.652a1.876 1.876 0 003.2-1.326z"/><path fill="#575C60" d="M20.333 43.667l-3.957-3.957L0 56.049l3.975 3.976L7.951 64l16.376-16.339z"/><path fill="#333637" d="M24.327 47.661l-3.994-3.994L3.975 60.025 7.951 64z"/></g></svg>
</div>
<div class="card">
<h2>Team Builder</h2>
Scans our talent network to create the optimal team for your project
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#EFEFF4" d="M64 14.454v41.788H0V14.454l3.75-3.787h56.5z"/><path fill="#DADAE5" d="M64 14.454v41.788H32V10.667h28.25z"/><path fill="#474F54" d="M0 0h64v15.515H0z"/><path fill="#32393F" d="M32 0h32v15.515H32z"/><g fill="#FF637B"><path d="M7.758 5.818h3.685v3.879H7.758zM15.128 5.818h3.685v3.879h-3.685zM22.497 5.818h3.685v3.879h-3.685z"/></g><path fill="#FF637B" d="M45.576 42.245V64H34.355v-3.71h-3.74V64H19.394V42.245l11.37-9.275h3.105z"/><path fill="#DADAE5" d="M11.636 22.303h41.697v3.879H11.636z"/><path fill="#C9C9D3" d="M32 22.303h20.364v3.879H32z"/><path fill="#E63950" d="M45.576 42.245V64H33.939v-3.71H32V32.97h1.435z"/><path fill="#EFEFF4" d="M30.061 45.576h3.878v3.879h-3.878z"/><path fill="#DADAE5" d="M32 45.576h1.939v3.879H32z"/><path fill="#676E74" d="M50.424 45.779l-2.452 2.706-15.487-13.526-15.488 13.526-2.452-2.706 17.94-15.718z"/><path fill="#474F54" d="M32 30.061l18.424 15.718-2.518 2.706L32 34.959z"/></g></svg>
</div>
<div class="card">
<h2>Calculator</h2>
Uses data from past projects to provide better delivery estimates
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#474F54" d="M64 0v41.25l-3.75 3.875H3.75L0 41.25V0z"/><path fill="#32393F" d="M64 0v41.25l-3.75 3.875H32V0z"/><path fill="#DADAE5" d="M22.625 50.875h18.75v11.25h-18.75z"/><path fill="#C9C9D3" d="M32 50.875h9.375v11.25H32z"/><path fill="#EFEFF4" d="M0 41.25h64v11.5H0z"/><path fill="#DADAE5" d="M32 41.25h32v11.5H32z"/><path fill="#EFEFF4" d="M15.125 60.25h33.75V64h-33.75z"/><path fill="#DADAE5" d="M32 60.25h16.875V64H32z"/><path fill="#549EF2" d="M20.75 7.5c-7.236 0-13.125 5.889-13.125 13.125S13.514 33.75 20.75 33.75s13.125-5.889 13.125-13.125S27.986 7.5 20.75 7.5zm0 18.75a5.631 5.631 0 01-5.625-5.625A5.631 5.631 0 0120.75 15a5.631 5.631 0 015.625 5.625 5.631 5.631 0 01-5.625 5.625z"/><g fill="#377FD2"><path d="M45.125 7.5H56.5v3.75H45.125zM37.625 7.5h3.75v3.75h-3.75zM45.125 22.5H56.5v3.75H45.125zM37.625 22.5h3.75v3.75h-3.75zM37.625 15H56.5v3.75H37.625zM37.625 30H56.5v3.75H37.625z"/></g></g></svg>
</div>
<div class="card">
<h2>Karma</h2>
Regularly evaluates our talent to ensure quality
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#676E74" d="M26.375 52.625h11.25V64h-11.25z"/><path fill="#333637" d="M32 52.625h5.625V64H32z"/><path fill="#4C545A" d="M22.625 47h18.75v9.375h-18.75z"/><path fill="#52585C" d="M32 47h9.375v9.375H32z"/><path fill="#FFDA2D" d="M45.012 36.725c-2.325 1.913-3.637 4.612-3.637 7.425V47h-18.75v-2.85c0-2.85-1.238-5.512-3.3-7.125-5.062-3.938-7.95-9.862-7.95-16.275a20.585 20.585 0 017.613-16.013C22.7 1.737 27.238 0 32 0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313 19.612z"/><path fill="#FDBF00" d="M45.012 36.725c-2.325 1.913-3.637 4.612-3.637 7.425V47H32V0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313 19.612z"/><path fill="#676E74" d="M18.875 45.125h26.25v3.75h-26.25z"/><path fill="#FF9100" d="M39.956 10.143l2.651 2.651-3.979 3.978-2.651-2.651z"/><path fill="#FDBF00" d="M25.372 24.727l2.651 2.651-3.979 3.979-2.651-2.651zM30.125 28.25h3.75v5.625h-3.75z"/><path fill="#FF9100" d="M38.628 24.727l3.979 3.979-2.651 2.651-3.979-3.979zM39.5 18.875h5.625v3.75H39.5z"/><path fill="#FDBF00" d="M24.044 10.143l3.979 3.979-2.651 2.65-3.979-3.978zM18.875 18.875H24.5v3.75h-5.625zM30.125 7.625h3.75v5.625h-3.75z"/><g fill="#FFDA2D"><path d="M0 18.875h7.625v3.75H0zM6.585 14.81l-5.75-3.75 2.08-3.12 5.75 3.75zM2.915 33.56l-2.08-3.12 5.75-3.75 2.08 3.12z"/></g><path fill="#FDBF00" d="M56.375 18.875H64v3.75h-7.625zM61.085 33.56l-5.75-3.75 2.08-3.12 5.75 3.75zM57.415 14.81l-2.08-3.12 5.75-3.75 2.08 3.12z"/><path fill="#FF9100" d="M32 7.625h1.875v5.625H32zM32 28.25h1.875v5.625H32z"/><path fill="#333637" d="M32 45.125h13.125v3.75H32z"/><path fill="#FDBF00" d="M32 11.375c-5.175 0-9.375 4.2-9.375 9.375s4.2 9.375 9.375 9.375 9.375-4.2 9.375-9.375-4.2-9.375-9.375-9.375z"/><path fill="#FF9100" d="M32 30.125v-18.75c5.175 0 9.375 4.2 9.375 9.375s-4.2 9.375-9.375 9.375z"/><path fill="#FFDA2D" d="M30.125 18.875h3.75v3.75h-3.75z"/><path fill="#FDBF00" d="M32 18.875h1.875v3.75H32z"/></g></svg>
</div>
</main>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Romain Desson.
</p>
</footer>
</body>
</html>
`
It looks like SVGs from card 2 and 4 are not recognized as a part of the card because they are placed at the position I want but as a child of the main and not the div.
Thanks in advance.
Try changing position:static to position: relative in .card class
.card {
position: relative;
display: flex;
flex-direction: column;
background: white;
border-radius: 9px;
box-shadow: 8px 1px 20px grey;
padding-left: 40px;
padding-right: 40px;
margin: 20px;
}