I want to extend the width of the background to that of the viewport and its height equal to the content I'm putting inside it. As you can see, I've set the width of .bgcont in CSS to 100vw and height: 100% but it's still not extending to it. Please also help with the height. I want the background's height to end just below the 2 buttons I've added.
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100% ;
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="container bgcont" >
<nav class="d-flex flex-row">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
Width issue
For the width issue, it's just a matter of adding the following:
header .bgcont {
…
max-width: none;
}
Keep in mind, though, that this line is overriding rules inside of _grid.scss for various breakpoints:
Height issue
For the height to end just below the two buttons you've added, remove the height rule in .bg-cont. To give things a bit of breathing room, I added a touch of bottom padding as well.
Demo
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
max-width: none; /* Overrides existing rules defined in _grid.scss */
background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
padding-bottom: 1.5em; /* <-- Added to make things look nice */
/* height: 100% /* /* <-- Removed this */
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="container bgcont" >
<nav class="d-flex flex-row">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
Its a bootstrap related issue. Actually you are using container class which is meant for fixed width grid.
You suppose to use container-fluid instead.
You have added the bg in the container, width: 1140px. For this reason it is not covering the full area. and for the height, in fullscreen view the height is covering 100% of the viewport.
Refer to the screenshot
Class container it's used for a web with a max width.
Class container-fluid it's for web that uses full width.
When using container it's supposed you will change max-width to set what your design has
Simply use min-height instead of height to include the button on small screens and remove container class to have full width:
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
/* don't need this
body{
overflow-x: hidden;
}
*/
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background-image:linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0;
top: 0;
width: 100%; /*don't use vw to avoid including scrollbar in the width*/
min-height: 100% ;
padding-bottom:50px;
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="bgcont px-2" > <!-- used px to add some padding like done by container -->
<nav class="d-flex flex-row">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
You can also optimize your code and rely on Bootstrap classes. I have also used gradient to have a better curve at the bottom:
html{
font-family: sans-serif;
}
header a{
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background:
radial-gradient(55% 100px at top,transparent 93%,#fff 95%) bottom/100% 100px no-repeat,
linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
padding-bottom:30px;
}
nav ul{
list-style: none;
padding: 0;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="bgcont px-2 pt-1 min-vh-100" >
<nav class="d-flex justify-content-between align-items-center">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0 d-flex align-items-center">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
Related
i have a problem with the info div overflowing it parent container but not it content ,some other component are also overflowing but it's not a problem and a margins problem some are just there and the others won't appear at all this is happening in width under 375px
plus if any one has an idea why the font awesome icon appears as a square i couldn't find a solution
update
the overflow problem has been solved but i still have a problem with the extra margin of the html on the right and the lack of for the container
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<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" />
<title>Document</title>
</head>
<body>
<div class="container">
<img src="images/image-product-desktop.jpg" alt="">
<div class="info">
<span class="type">Perfume</span>
<h1 class="title">Gabrielle Essence Eau De Parfume</h1>
<p>A floral, solar and voluptuous interpretation composed by Oliver Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="prices">
<span class="newprice">$149.99</span>
<span class="oldprice">$169.99</span>
</div>
<button><i class="fa-regular fa-cart-shopping"></i> Add To Cart</button>
</div>
</div>
</body>
</html>
`
`
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: hsl(228, 12%, 48%);
}
html{
margin: 0;
}
body{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.container{
max-width: 37rem;
max-height: 45rem;
display: flex;
background-color: #fff;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
img{
max-width: 18.5rem;
max-height: 45rem;
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.title{
font-family: 'Fraunces', serif;
color: black;
margin: .8rem auto 1rem;
}
.info{
padding: 1.9rem;
}
p{
font-size: 14px;
line-height: 1.3rem;
}
.prices{
margin: 1.5rem auto 1.3rem;
display: flex;
align-items: center;
}
.newprice{
font-family: 'Fraunces', serif;
font-weight: 700;
color: #658354;
font-size: 2rem;
}
.oldprice{
text-decoration:line-through;
font-size: .7rem;
margin: 1rem;
}
button{
color: #fff;
background-color: #658354;
width: 100%;
padding: 1.5rem 1rem;
font-size: .8rem;
border: none;
padding: .7rem;
border-radius: .5rem;
cursor: pointer;
}
button:active{
background-color: #2f4125;
}
#media(max-width : 375px){
*{
margin: 1rem;
}
img{
width: 100%;
height: 40%;
border-radius: .5rem;
}
.container{
display: block;
}
.info{
margin-bottom: 1rem;
padding: 0;
height: 100%;
}
}
`
you can add in css
#media screen and (min-width: 320px) and (max-width: 375px) {
//your code
}
remove the max-height: 45rem; property from container class
for any one who has the margin problem as i do here i solved it by eliminating the body height and width to auto in the 375 max-width media
I am trying to improve my css skills by practicing making and cloning various projects , I was practicing this nft project from frontendmentor and faced this problem , A vertical scrollbar always appear on my web page and I don't know why is this happening , I have tried changing the height of my main container from 50% to 33% but the problem remains the same , I am attaching the code for your reference
#import url(https://fonts.google.com/specimen/Outfit);
:root {
--Soft-blue: hsl(215, 51%, 70%);
--Cyan: hsl(178, 100%, 50%);
--Very-dark-blue1: hsl(217, 54%, 11%);
--Very-dark-blue2: hsl(216, 50%, 16%);
--Very-dark-blue3: hsl(215, 32%, 27%);
--White: hsl(0, 0%, 100%)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--Very-dark-blue1);
color: var(--White);
font-family: "Outfit", sans-serif;
font-size: 18px;
}
.container {
width: 33%;
height: 50%;
margin: 3em auto;
overflow: hidden;
background-color: var(--Very-dark-blue2);
border-radius: 12px;
display: flex;
flex-direction: column;
text-align: left;
}
.nft {
width: 100%;
height: 40%;
border-radius: 12px;
}
.nft img {
width: 100%;
height: 100%;
padding: 2em;
border-radius: 12%;
}
h3.title-nft {
color: var(--White);
padding: 0 1.5em;
}
p.info {
color: var(--Soft-blue);
font-weight: 300;
padding: 1.75em;
letter-spacing: 0.1em;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
}
li {
padding: 1.75em;
}
li.eth {
color: var(--Cyan);
}
li.clock {
color: var(--Soft-blue);
}
hr {
width: 80%;
margin: 0 auto;
border-color: var(--Very-dark-blue3);
}
.footer {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 2em;
}
.footer img {
border-radius: 50%;
width: 3em;
border: 2px solid var(--White);
margin-right: 1.75em;
}
.footer p {
color: var(--Soft-blue);
}
.footer span {
color: var(--White);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />
<title>Frontend Mentor | NFT preview card component</title>
</head>
<body>
<div class="container">
<div class="nft">
<img src="images/image-equilibrium.jpg" />
</div>
<div class="main-content">
<h3 class="title-nft">Equilbirium #3429</h3>
<p class="info">Our Equilibirum collection promotes balance and calm</p>
<div class="side-details">
<ul>
<li class="eth">
<img src="images/icon-ethereum.svg" /> 0.041 ETH
</li>
<li class="clock">
<img src="images/icon-clock.svg" /> 3 Days Left
</li>
</ul>
</div>
</div>
<hr />
<div class="footer">
<img src="images/image-avatar.png" />
<p class="creator">
Creation of <span class="wrapper">Jules Wyvern </span>
</p>
</div>
</div>
</body>
</html>
I can't answer why, but container ignore height: 33%, and using 100% + border. This and create problem. You can try use 33vh.
I've been working on this project and I am fully stuck on ensuringing both cards (the image and the project content) are on the same row when displayed on desktop. After a few days, I admit I need help.
Can anyone tell me where I've gone wrong and how I can solve this using flexbox correctly because I am going crosseyed trying to figure it out.
Below is a photo of what it's supposed to look like in desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
#media screen and (max-width : 667px) {
#container {
border-radius: 10px 0 10px 0;
height: 39.7em;
width: 22.8em;
}
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.image {
background-image: url(images/image-product-desktop.jpg);
background-repeat: no-repeat;
background-size: contain;
border-radius: 10px 0 0 10px;
height: 394px;
max-width: 50%;
margin-right: 0;
display: flex;
flex-direction: row;
}
#media screen and (max-width : 667px) {
.image {
background-image: url(images/image-product-mobile.jpg);
border-radius: 10px 10px 0 0;
height: 230px;
width: 50%;
margin: 0 auto;
}
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
}
#media screen and (max-width : 667px) {
.right-container {
border-bottom-left-radius: 10px;
border-top-right-radius: 0px;
padding: 30px 30px 5px;
width: 50%;
margin: 0 auto;
}
}
.right-container h1 {
margin: auto auto 7% auto;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
padding: 4% 32%;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
<!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">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap"
rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="row">
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<img src="./images/icon-cart.svg" alt="card-img">
<button class="cart-btn">Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
To solve this I simply put the element with the background-image in a new div called .left-container. I removed the use of two .row's and put them in one row and set it to display: flex;. I then used Font Awesome for your shopping cart icon.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
.row {
display: flex;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.left-container {
width: 50%;
height: 450px;
}
.image {
background-image: url(https://i.picsum.photos/id/487/200/300.jpg?grayscale&hmac=j_GpFy8cDZyFmRD6sSG09M39jrZwpW3dCYWYnWlC1Vo);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
border-radius: 10px 0 0 10px;
margin-right: 0;
display: flex;
flex-direction: row;
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
display: flex;
flex-flow: column;
justify-content: space-around;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
width: 100%;
padding: 1em;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
i {
color: white;
}
.card-container {
display: flex;
}
<!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">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="left-container">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<button class="cart-btn"><i class="fa-solid fa-cart-shopping"></i>
Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
I have made my self page that replicates the solution you want, I have done minimal styling to make you understand how flexbox properties in CSS work (NOTE: I have not made it responsive so try to have a look on desktop view). Refer to my solution and ask question(s) if you are facing any doubts.
* {
margin: 0;
padding: 0;
}
.card-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
font-family: "Montserrat", sans-serif;
font-size: 0.875em;
}
#random-image {
height: 100%;
width: 100%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.intermediate-container {
display: flex;
width: 60%;
height: 50%;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
}
.left-container {
width: 50%;
}
.right-container {
width: 50%;
padding: 10px;
background-color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Your title</title>
</head>
<body>
<section class="card-container">
<div class="intermediate-container">
<div class="left-container">
<img
id="random-image"
src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
/>
</div>
<div class="right-container">
<div>
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<div class="price-container">
<h1>$149.99</h1>
</div>
<div class="cart-container">
<button class="cart-btn">
<i class="fa-solid fa-cart-shopping"></i> Add to Cart
</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
#card-container row <- use proper selector (.row)
and from given information I can only predict that
I'm trying to add some hover effects to my landing page and i'm stuck at doing the hover effect at the image, the hover in the title and author I was able to do easily.
I tried some stuff but I still couldn't do, the solutions that I saw here on stackoverflow was using position: absolute, but I was looking for some other solution (if there is).
If the main solution is using position: absolute and you want to please help me understand, I find very difficult to understand and use position: absolute.
Here's how my page look like right now
:root {
--soft-blue: hsl(215, 51%, 70%);
--cyan: hsl(178, 100%, 50%);
--main-bg: hsl(217, 54%, 11%);
--card-bg: hsl(216, 50%, 16%);
--line: hsl(215, 32%, 27%);
--white: hsl(0, 0%, 100%);
--font-size: 18px;
--font: 'Outfit', sans-serif;
}
body {
margin: 0;
font-family: var(--font);
}
.page {
display: flex;
height: 100vh;
background-color: var(--main-bg);
justify-content: center;
align-items: center;
}
.page__container {
box-sizing: border-box;
padding: 20px 20px 0px 20px;
background-color: var(--card-bg);
width: 400px;
height: 650px;
border-radius: 20px;
}
.page__container img {
margin: 0;
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.page__container h1 {
color: var(--white);
font-size: 26px;
margin: 15px 0 10px;
}
.page__container h1 a {
color: var(--white);
text-decoration: none;
}
.page__container .description {
margin: 0;
font-weight: 400;
color: var(--soft-blue);
font-size: 20px;
}
.price-deadline {
display: flex;
align-items: center;
justify-content: space-between;
}
.eth {
display: flex;
align-items: center;
}
.eth .eth-icon {
max-height: 18px;
max-width: 11px;
margin-right: 5px;
}
.eth .eth-price {
color: var(--cyan);
}
.deadline {
display: flex;
align-items: center;
}
.deadline .clock-icon {
max-width: 17px;
max-height: 17px;
margin-right: 5px;
}
.deadline .due-date {
font-weight: 600;
color: var(--soft-blue);
}
.divisor {
height: 1px;
background-color: var(--soft-blue);
border: none;
}
.author {
display: flex;
align-items: center;
padding-top: 10px;
}
.author .avatar {
border: 1px solid white;
border-radius: 50px;
max-height: 40px;
max-width: 40px;
margin-right: 10px;
}
.author .credits {
color: var(--soft-blue);
}
.author a {
font-size: 16px;
color: var(--white);
text-decoration: none;
}
/* Hover Section */
.author a:hover {
color: var(--cyan);
}
.text h1 .link:hover {
color: var(--cyan);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./images/favicon-32x32.png" type="image/x-icon">
<title>NFT Preview Card</title>
</head>
<body>
<div class="page">
<div class="page__container">
<img src="./images/image-equilibrium.jpg" alt="" class="equilibrium">
</p>
<div class="text">
<h1>Equilibrium #3429</h1>
<p class="description">
Our Equilibrium collection promotes
balance and calm.
</p>
<div class="price-deadline">
<div class="eth">
<img src="./images/icon-ethereum.svg" alt="" class="eth-icon">
<p class="eth-price">0.041 ETH</p>
</div>
<div class="deadline">
<img src="./images/icon-clock.svg" alt="" class="clock-icon">
<p class="due-date">3 days left</p>
</div>
</div>
</div>
<hr class="divisor">
<div class="author">
<img src="./images/image-avatar.png" alt="" class="avatar">
<p class="credits">
Creation of Jules Wyvern
</p>
</div>
</div>
</div>
</body>
</html>
i cannot think of another way without position: absolute
but i have created you an example where the the image is positioned automatically on the center using flex box https://jsfiddle.net/r5Lfcbh8/2/
Edit i use position relative on the parent div as relative make the children absolute top left 0 same as relative.
<div class="overlayPar">
<img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
<div class="imgOverlay">
<span class="eye"></span>
</div>
</div>
.overlayPar {
position: relative;
}
.imgOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 255, 247, .4);
display: none;
}
.imgOverlay .eye {
background: white;
width: 25px;
height: 25px;
display: block;
margin: auto;
}
.overlayPar:hover .imgOverlay {
display: flex;
}
.equilibrium {
display: block;
}
My html, css and bootstrap look fine when I view them on my MAC in chrome and safari. However, when I view it on the WAMP server (Windows XP pro) the Bootstrap does not seem to be implementing. The CSS seems like it still works fine.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/Users/Pat/Downloads/bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="Website_Layout.css">
<title>Home</title>
</head>
<body>
<nav class="nav">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li>Home</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<h1>Safron Technologies</h1>
<p>Social Media Application Specialists</p>
</div>
</div>
<div class="fuel">
<div class="container-fluid">
<h1>What Fuels Us?</h1>
<p>We love building apps that change the way media is processed and viewed. Our apps will change your everyday life.</p>
</div>
</div>
<div class="learn-more">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Development</h2>
<p>We specialize in creating IOS Apps with the sole purpose of connecting people, products and ideas.</p>
</div>
<div class="col-md-6">
<h2>Innovation</h2>
<p>Safron Technologies is on the cutting edge of Social Media Application Development. We have the knowledge and experience to produce sucessful worldwide applications.</p>
</div>
</div>
</div>
</div>
<nav class="nav2">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h1>Contact Us</h1>
<p>(610) 639-7475</p>
<p>safrontechnolo.g#gmail.com</p>
</div>
<div class="col-md-3">
<h2>Inside Safron</h2>
<ul>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
CSS:
.nav {
width: 100%;
float: top;
position: fixed;
margin: 0px 0px 0px 0px;
padding: 0px;
background-color: black;
height: 60px;
z-index: 100;
}
.nav ul {
list-style: none;
width: 800px;
margin-left: 300px;
margin-right: 300px;
padding: 0px;
text-align: center;
}
.nav li a {
display: block;
padding: 20px 20px;
color: white;
font-size: 16px;
text-transform: uppercase;
}
.nav li a:hover {
color: #FF6600;
background-color: white;
height: 60px;
}
.jumbotron {
background-image: url("/Users/Pat/Documents/Safron_Mountain.jpeg");
height: 880px;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 0;
}
.jumbotron h1 {
font-size: 64px;
text-align: center;
color: #FF7F50;
text-shadow: -1.2px 0 black, 0 1.2px black, 1.2px 0 black, 0 -1.2px black;
font-weight: bold;
font-family: 'Shift',sans-serif;
padding-top: 15px;
padding-bottom: 20px;
}
.jumbotron p {
font-size: 26px;
font-weight: bold;
text-align: center;
}
.fuel {
height: 800px;
background-color: #FF7F50;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 0;
}
.fuel h1 {
text-align: center;
font-size: 68px;
padding-top: 200px;
padding-bottom: 50px;
color: white;
text-shadow: .3px .3px 0 #CCC, .6px .6px 0 #CCC, .9px .9px 0 #444, 1.2px 1.2px 0 #444, 1.5px 1.5px 0 #444, 1.8px 1.8px 0 #444;
}
.fuel p {
text-align: center;
font-size: 36px;
padding-left: 200px;
padding-right: 200px;
color: white;
}
.learn-more {
height: 800px;
margin-bottom: 0;
}
.learn-more h2 {
text-align: center;
color: black;
font-size: 60px;
padding-top: 225px;
}
.learn-more p {
text-align: center;
color: black;
font-size: 32px;
padding-left: 50px;
padding-right: 50px;
}
.nav2 {
height: 150px;
background-image: url("/Users/Pat/Downloads/footer_lodyas/footer_lodyas.png");
}
.nav2 h1 {
font-size: 18px;
padding-bottom: 0px;
font-weight: bold;
color: white;
}
.nav2 p {
color: white;
}
.nav2 ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav2 a {
color: white;
font-size: 14px;
}
.nav2 li a {
display: block;
padding: 5px 0px;
color: white;
}
.nav2 h2 {
font-size: 18px;
font-weight: bold;
color: white;
}
Thanks for all of the help.
/Users/Pat/Downloads/bootstrap-3.3.2-dist/css/ is a path in your Mac computer and not in your Windows computer.
So you can choose to just have the file in the same folder (and use the file's name instead, as you did for Website_Layout.css) or use a Bootstrap CDN.
I like using relative paths in development so that I can move the files without any problems.For example, I create css,js and images folders inside the project directory.From there the path to say css files will be css/css_file.css.
Also,as mentioned by others you can use a cdn like http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css.