I made this card to display an image and info but there is a gap I can't remove using css
Here is the style and html
.card-container>* {
width: auto;
height: auto;
margin: 0;
}
.ratings {
display: flex;
align-items: center;
background-color: aqua;
width: auto;
height: fit-content;
}
.card-container img {
width: 240px;
height: 350px;
object-fit: cover;
}
.card-container .stausbg {
background-color: aqua;
}
<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" />
<div class="card-container">
<img src='https://dummyimage.com/600x400/000/fff' alt='card' />
<span class="stausbg">Sold Out</span>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<p class="no-star">5</p>
<p class="no-pp">(40)</p>
<i class="fa-solid fa-circle"></i>
<p class="country">Usa</p>
</div>
<h5 class="title">Life lessons with jake</h5>
<h6>From $200 / person</h6>
</div>
Here I have used aqua color as the background color of .ratings class. I want to remove the undefined space (margin padding) and apply my own style
That space is coming from p tag. Just remove the margin.
.ratings p {
margin: 0;
}
If you want to set all the margins of the child items in the card to zero then, instead of using the child combinator (>) just use the descendent combinator.
Quite a lot of developers use 'reset' rules to remove some of the weird, default user agent stylesheet behaviours. Here's a quick video by Kevin Powell on this topic.
.card-container * {
width: auto;
height: auto;
margin: 0;
}
.ratings {
display: flex;
align-items: center;
background-color: aqua;
width: auto;
height: fit-content;
}
.card-container img {
width: 240px;
height: 350px;
object-fit: cover;
}
.card-container .stausbg {
background-color: aqua;
}
<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" />
<div class="card-container">
<img src='https://dummyimage.com/600x400/000/fff' alt='card' />
<span class="stausbg">Sold Out</span>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<p class="no-star">5</p>
<p class="no-pp">(40)</p>
<i class="fa-solid fa-circle"></i>
<p class="country">Usa</p>
</div>
<h5 class="title">Life lessons with jake</h5>
<h6>From $200 / person</h6>
</div>
Related
I want to change the style of my component to fit the content,
My component Plan.vue:
<template>
<div class="plan">
<div id="planFlex">
<font-awesome-icon icon="fa-solid fa-user fa-xl" />
<font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
<h1>Plan</h1>
<font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
<font-awesome-icon icon="fa-solid fa-robot fa-xl" />
</div>
</div>
</template>
<script>
export default {
name: "Plan"
};
</script>
<style>
#import "../css/Plan.css";
</style>
my stylesheet Plan.css:
#planFlex {
display: flex;
justify-content: space-between;
padding: 5px;
}
.fa-user {
color: white;
}
.fa-robot {
color: white;
}
.fa-arrow-right {
color: white;
position: relative;
padding-left: 80px;
}
.fa-arrow-left {
color: white;
padding-right: 80px;
}
#planFlex h1 {
text-align: center;
margin: 0px;
color: antiquewhite;
}
#planFlex h1:hover {
cursor: pointer;
}
#planFlex h2 {
margin: 0px;
padding-left: 3%;
color: white;
}
I have tried to add flex-shrink: 1, and width: fit-content to my stylesheet, but it didn't work well with me, can you please tell me how can I make my design responsive? thanks in advance.
The problem is with .plan outer div which by default will display as block, making your #planFlex stretch to its borders.
If you add the following you should find that #planFlex will just be the width of your content:
.plan {
display: flex;
justify-content: center;
}
In your specific case, you should consider removing the 80px padding on your arrow icons and let flex do the spacing for you. Assuming you want the icons to stick to the sides and your title right in the middle, just wrapped them around in some div, that did the trick for me running your project:
<div id="planFlex">
<div>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-arrow-left fa-xl"></i>
</div>
<h1 #click="addPopUp(testPopup, `Lego not in the right place`)">Plan</h1>
<div>
<i class="fa-solid fa-arrow-right fa-xl"></i>
<i class="fa-solid fa-robot fa-xl"></i>
</div>
</div>
Hi I'm trying to add a colored border to my 'dreams-anchor-wrap' div but can't seem to be able to use any CSS on it for some reason and I'm not sure why. Is it not possible to wrap a div around an anchor tag and then add CSS properties to it?
here's the link to my sandbox code:
https://codesandbox.io/s/unruffled-jones-0v0xj?file=/src/App.js
You just misspelled className on 'dreams-anchor-wrap' div.Correct your mistake and should work
You have to write your classes like "class" not className.
Then it will be run correctly.
* {
margin: 0;
border: 0;
padding: 0;
}
.dream-homes-container {
display: flex;
justify-content: center;
}
.dream-home-card {
margin: 0 auto;
padding: 15px;
width: 200px;
height: 100%;
}
.dream-homes-container :last-child {
padding-right: 0;
}
.dream-home-card img {
width: 100%;
height: 70%;
}
.property-info {
width: 100%;
color: black;
padding: 0 0 5px 10px;
}
.dream-home-card a {
text-decoration: none;
width: 100%;
}
.num-specs-margin {
margin-right: 10px;
}
.dream-anchor-wrap {
border:2px solid blue;
}
.dream-homes-wrap {
margin-bottom: 50px;
}
<div class="App">
<div class="dream-home-card">
<a href="#">
<div class="dream-anchor-wrap">
<img src="https://images.pexels.com/photos/2343466/pexels-photo-2343466.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<div class="property-info">
<h4>Pent Suite</h4>
<div class="property-specs">
<i class="fas fa-bed"></i>
<span class="num-beds num-specs-margin">4</span>
<i class="fas fa-shower "></i>
<span class="num-baths num-specs-margin">2</span>
<i class="fas fa-car"></i>
<span class="num-cars ">2</span>
</div>
</div>
</div>
</a>
</div>
</div>
I am trying to design a nav-bar using flex-box. I have three div and whenever the browser shrinks, I want to reduce the spacing between the icons inside header__centerclass.
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
padding: 15px 20px;
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 30px;
cursor: pointer;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center d-none d-xl-flex d-md-flex">
<div class="header__option">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info d-none d-xl-flex">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>
What is the best way to still place those icons in the center and reduce the spacing? or is there any easy way to handle using the bootstrap 4 classes?
And the div is only visible in xl md devices.
Measure your padding property in units of vw, not px.
This represents a fraction of the viewport/window/tab width.
Scenario: I need a container with relative positioning, which has 2 absolute positioned children. On clicking the container both children will be transitioned on transform property, one being moved to the left and one being moved to the right, both outside the window, so I need somehow to set overflow: hidden on the parent, in order not to show the transitioned elements outside of parent container.
The thing is parent does not have a height set because of the absolute children, and when I use overflow-x: hidden on it, nothing is showed anymore.
Is it possible to set an overflow so that when children gets transformed to left/right no scrollbar will be showed? I do not want to set overflow on the body element. I'm looking for CSS-only solutions, if there are any.
Also setting a fixed height for parent is not a solution to my problem, please take that into consideration.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is my SASS code
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html and body elements are set to width: 100% and `height: 100%;
I suggest to not use position: absolute or float, as neither is meant for general layout.
They both take their element out flow (in somewhat different ways though), and make it more difficult to create a responsive page.
You could simplify the code a little and use display: inline-block, like this
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Or use flexbox, which today is the recommended way to do layout
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.
.half-left, half-right {
float: left;
}
.box {
position: relaitve;
overflow: hidden;
}
Then when you add active to the parent container, the two children should transform as you intended.
Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ
I know this is a common question but I'm sure I'm just missing something obvious here. I'm trying to get the fontawesome icon to vertically align in the middle of the parent div, but it just keeps sitting at the top.
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
I'll refer you to here, which explains 1) your common question and 2) how to actually vertically align.
Summary: vertical align doesn't work the way you think it does, and you have to use other methods (easily found online) to vertically align.
You can also look into using flex-box or hacks already posted on SO.
Because the div is hidden using display:none the property needs to be changed to display:table and then the child div should have the property display:table-cell.
function spinner() {
$("#spinner").css("display", "table");
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
border: 10px solid red;
color: yellow;
display: table-cell;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
There is two common techniques that I know of.
Use the table method below.
Sometimes making your element to display as table creates a headache in responsive website and in that case you can use the transform:translate technique.
#spinner div {
position: relative;
}
#spinner .fa-spinner{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
display: table;
width: 100%;
}
#spinner .fa-spinner{
display: table-cell;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>