I am trying to make a homepage for my portfolio website with a responsive css background rectangle and a side-by-side hero with text on the left and an image on the right, such as the website template here. I can't figure out what I did wrong in my HTML or CSS that's making it so that the background css rectangle isn't extending the full width of the screen. I'm new at this, so I would appreciate the help.
#charset "utf-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght#500&display=swap');
/*Variable*/
:root {
--primary-color: #0d081a;
--secondary-blue: #eaf0f9;
--secondary-gray: #48463b;
--body-bg: ffffff;
}
/*Global Styles*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
scroll-behavior: smooth;
}
body {
background-color: var(--body-bg);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
margin: 0;
min-height: 100vh;
}
img {
width: 100%;
height: 100%;
}
a {
color: black;
text-decoration: none;
}
section {
display: flex;
align-items: center;
justify-content: center;
}
.background {
border: 0;
padding: 0;
width: max-content;
background-color: var(--secondary-blue);
}
.container {
width: 90%;
height: 100%;
margin: 0 auto;
}
.primary-btn {
display: inline-block;
background-color: var(--primary-color);
color: white;
font-size: 1.8rem;
padding: 0.6em 1.6em;
border-radius: 50px;
}
.buttons {
margin-top: 3rem;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2rem;
}
/*nav*/
#navigation {
position: fixed;
right: 50px;
height: auto;
top: 20px;
z-index: 100;
}
/*hero section*/
#hero {
height: 100vh;
width: 100%;
padding-top: 10rem;
}
#hero .container {
display: flex;
align-items: center;
justify-content: center;
}
#hero .container .left {
flex: 6;
}
#hero .container .right {
flex: 8;
}
#hero .left .subheading {
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase;
color: var(--primary-color);
}
#hero .left .heading {
font-size: 6rem;
font-family: 'Times New Roman', Times, serif;
font-weight: 600;
}
#hero .left .desc {
margin-top: 2.5rem;
max-width: 400px;
font-size: 1.5 rem;
color: var(--secondary-blue);
}
#hero .right {
text-align: right;
}
#hero .right img {
width: 100%;
max-width: 450px;
height: 600px;
object-fit: cover;
object-position: 50% 30%;
border-radius: 12px;
}
#media only screen and (max-width: 768px) {
html {
font-size: 9px;
}
#hero .container {
flex-direction: column-reverse;
}
#hero .container .right {
text-align: center;
flex: 1;
margin-bottom: 2rem;
}
#hero .container .left {
text-align: center;
padding-right: 0;
flex: 1;
height: fit-content;
}
#hero .left .buttons {
justify-content: center;
}
#hero .left .heading {
font-size: 4rem;
margin: 0 auto;
}
#hero .container .left .desc {
margin: 0 auto;
margin-top: 2rem;
}
#hero .right img {
width: 100%;
height: 400px;
}
}
#media only screen and (max-width: 1200px) {
#hero .container .right {
flex: 6;
}
}
/* End Hero Section*/
/*Navbar*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.main-nav {
margin-top: 5px;
}
.logo a,
.main-nav a {
padding: 10px 15px;
text-transform: uppercase;
text-align: center;
display: block;
}
.main-nav a {
color: #34495e;
font-size: 1.5em;
}
.main-nav a:hover {
color: #718daa;
}
.header {
padding-top: 1em;
padding-bottom: 1em;
}
/* Nav Media Queries*/
#media (min-width: 769px) {
.header,
.main-nav {
display: flex;
}
.header {
flex-direction: column;
align-items: flex-end;
.header {
width: 80%;
margin: 0 auto;
max-width: 1150px;
}
}
}
#media (min-width: 1025px) {
.header {
flex-direction: row;
justify-content: flex-end;
}
}
<body>
<!--nav section-->
<header class="nav">
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!--end nav section-->
<!--hero section-->
<section id="hero">
<div class="background">
<div class="container">
<div class="left">
<p class="subheading"></p>
<h2 class="heading">
<div class="wrapper"><span>Hello, nice </span></div>
<div class="wrapper"><span>to"meet" you!</span></div>
</h2>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="buttons">
Contact Me
</div>
</div>
<div class="right">
<img src="/linkedinheadshot.png" alt="picture">
</div>
</div>
</div>
</section>
<!--End hero section-->
</body>
I've tried adjusting the padding and margins and the widths in the #mediaquery. Researching solutions on google and stack overflow.
i review your problem and if you use
#hero {
min-width: 100vw;
display: block;
background-color: var(--secondary-blue);
}
html #hero .container {
display: flex;
justify-content: space-between;
}
it will solve you problem
i am also a new web developer and learning now javascript
if it help you like this if you had still any problem post your question
Related
I have two big problems:
The first trouble I have encountered is that when I am testing the responsivity of my website in the contact section I always meet a reappearing problem: There is a white space (.2 rem - 1.2rem width) on the right side of the body when I try to display the whole page under 400px width device.
My second problem is that I have social media icons in the footer. They appear properly in all other sections (multipage website), but only here does something prevent them to be displayed properly. I tried resizing their main divs to 100% width and 100% max-width, but an element is probably still longer than the others, which should obviously cause this kind of problem.
So about the white blank area, I think it is important to know that I have a specially styled scrollbar, which might also cause this little mischief. I am unsure, so I have also tried removing it, but it did not help. In the beginning, I also encountered the same problem with the footer, but somehow I managed to get by and was able to solve it by correcting the width of the .footer-container. Since then the white space appeared and my second problem with social media icons not being displayed properly just arose.
Here is my code:
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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="contacts.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<div class="floating-btn show-btn" aria-label="up button" role="button">
<img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
</div>
<header>
<!--NAVBAR-->
<nav>
<ul class="menu" id="desktop-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
<!--HAMBURGER ICON-->
<div class="header-right-gap">
<button class="hamburger" aria-label="hamburger button">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
</nav>
<!--MOBILE MENU-->
<div class="mobile-menu">
<ul class="m-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolat</li>
</ul>
</div>
</header>
<main>
<!--CONTACT FORM-->
<div class="container">
<form>
<h1>Kapcsolat</h1>
<input type="text" id="firstName" placeholder="Családnév" required>
<input type="text" id="lastName" placeholder="Keresztnév" required>
<input type="email" id="email" placeholder="Email" required>
<input type="text" id="mobile" placeholder="Telefonszám" required>
<h4 class="contactus">Lépjen velünk kapcsolatba!</h4>
<textarea id="texti" required></textarea>
<input type="submit" value="Elküldés" id="button">
</form>
</div>
</main>
<footer>
<div class="footer-container">
<!--COMPANY INFORMATION, CONTATCTS-->
<div class="footer-top">
<div>
<article>
<h2>Elérhetőségeink</h2>
<div class="cellphone">
<img src="assets/png/telephone.png" alt="phone-icon">
<h3><span>Telefonszám:</span> +36709424298</h3>
</div>
<div class="internet">
<img src="assets/png/mail.png" alt="email-icon">
<h3><span>E-mail:</span> eckertmuvek#gmail.com</h3>
</div>
<div class="headquarter">
<img src="assets/png/location.png" alt="company-icon">
<h3><span>Telephely:</span> Budapest, 1182 Török Bálint u. 16/b</h3>
</div>
<div class="opening-hours">
<img src="assets/png/clock.png" alt="op-icon">
<h3><span>Nyitvatartási idő:</span> hétfő - péntek(7:00 - 17:30)</h3>
</div>
</article>
</div>
<!--TEXT-->
<div class="text-container">
<h4>Céginformációk</h4>
<p>
<ol>
<li>
<h5>Cégjegyzékszám: </h5>
<p> 01 09 996342</p>
</li>
<li>
<h5>Adószám: </h5>
<p>24222716243</p>
</li>
<li>
<h5>Számlaszám: </h5>
<p>112131423-43242142-432412421</p>
</li>
<li>
<h5>Cégnév: </h5>
<p>Eckert Művek Korlátolt Felelősségű Társaság</p>
</li>
</ol>
</p>
</div>
<!--
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
-->
<!--POLICIES-->
<div class="policies">
Impresszum
GDPR Tájékoztató
Süti Tájékoztató
</div>
</div>
<!--MAP-->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2699.366130757782!2d19.217992451587673!3d47.42430370844346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741c1f21fa88e89%3A0x44673b68b84b51c9!2zQnVkYXBlc3QsIFTDtnLDtmsgQsOhbGludCB1LiAxNmIsIDExODI!5e0!3m2!1shu!2shu!4v1672662477180!5m2!1shu!2shu"
height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!--SOCIAL MEDIA ICONS-->
<div class="social-media-icons">
<div class="sm-container" id="insta">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="github">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="facebook">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="linkedin">
<div class="sm-icon">
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Eckert Művek Kft. Minden jog fenntartva.</p>
</div>
</div>
</footer>
<script src="contacts.js"></script>
</body>
</html>
And here is my CSS code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--nav-height: 100px; /*80%*/
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
width: 100%;
font-size: 12px;
font-family: sans-serif;
}
.floating-btn {
position: fixed;
bottom: 3.5vh;
right: 0;
width: 50px;
height: 50px;
z-index: 100;
background-color: yellow;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5));
cursor: pointer;
margin-right: 1rem;
border: 1px solid #000;
}
.show-btn {
display: block;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 100;
background-color: #000;
}
/*Srcollbar*/
::-webkit-scrollbar{
width: 15px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: yellow;
border-radius: 10px;
border: 1px solid black;
}
::-webkit-scrollbar-thumb:active {
background: orangered;
}
nav {
display: flex;
width: min(90%, 1200px);
height: inherit;
align-items: center;
justify-content: flex-start;
margin-inline: unset;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
left: 2.5rem;
gap: 1rem;
/*margin-top: -2.5rem;*/
}
nav a {
max-height: var(--nav-height);
align-items: center;
margin-inline: auto;
font-size: 20px;
position: relative;
height: 100%;
}
nav ul {
display: flex;
gap: 1rem;
width: 100%;
list-style: none;
margin-top: 3rem;
}
.nav-item a {
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 20px;
height: 100%;
margin: .5em .8em;
padding: 10px;
}
.nav-item a::before,
.nav-item a::after {
content: '';
height: 14px;
width: 14px;
position: absolute;
transition: all .35s ease;
opacity: 0;
}
nav a::before {
content: '';
right: 0;
top: 0;
border-top: 3px solid #ffed4b;
border-right: 3px solid #fdcd3b;
transform: translate(-100%, 50%); /*-100%, 50%*/
}
.nav-item a:after {
content: '';
left: 0;
bottom: 0;
border-bottom: 3px solid #fdcd3b;
border-left: 3px solid #ffed4b;
transform: translate(100%, -50%); /*100%, -50%*/
}
.nav-item a:hover:before,
.nav-item a:hover:after{
transform: translate(0,0);
opacity: 1;
}
.nav-item a:hover {
text-decoration: underline;
color:yellow;
}
.container{
min-height: 100vh;
width: 99.vw;
background: #08071d;
display: flex;
justify-content: center;
align-items: center;
background: url("assets/images/mainpage/106811484-1608045351058-gettyimages-1126750618-dsc_1540.jpeg") no-repeat center center/cover;
}
.container form{
width: 670px; /*670px*/
height: 450px;
display: flex;
justify-content: center;
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
overflow-x: hidden;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
outline: none;
border: none;
font-size: 25px;
margin-bottom: 10px;
background: none;
border-bottom: 2px solid #fff;
}
.container form input::placeholder{
color: #ddd;
}
.container form #lastName,
.container form #mobile{
margin-left: 20px;
}
.container form h4{
color: #fff;
font-weight: 300;
width: 600px;
margin-top: 20px;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-weight: 200;
font-size: 25px;
padding: 10px;
outline: none;
min-width: 600px;
max-width: 600px;
min-height: 80px;
max-height: 80px;
}
.contactus {
font-size: 18px;
}
input[type="text"]:focus, input[type="email"]:focus, #texti:focus {
border-bottom: 3px solid #fdcd3b;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.container form #button{
border: 1px solid;
background: transparent;
border-radius: 50px;
margin-top: 20px;
font-weight: 600;
font-size: 20px;
color: #fff;
width: 100px;
padding: 0;
margin-right: 500px;
margin-bottom: 30px;
transition: 0.3s;
}
.container form #button:hover{
opacity: 0.9;
transform: scale(1.2);
background-color: black;
color: yellow;
}
/*FOOTER*/
footer {
width: 100%;
background-color: #000;
padding-block: 4rem;
color: white;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-inline: auto;
width: min(90%, 1200px);
}
.footer-top {
width: 100%;
height: 100%;
color: #fff;
font-size: 10px;
display: flex;
justify-content: space-around;
}
.footer-top h2 {
text-align: center;
justify-content: center;
align-items: center;
}
.footer-top article div {
line-height: 2.5rem;
}
.footer-top article div:first-of-type {
margin-top: 1rem;
}
.footer-top img {
height: 64px;
}
.text-container p {
margin-top: 2rem;
}
.text-container ol li {
line-height: 1.5rem;
}
/*CONTACT ICONS*/
.cellphone img, .internet img, .headquarter img, .opening-hours img{
background-color: yellow;
border-radius: 50px;
transition: all 0.3s linear;
}
footer img:hover {
background-color: orangered;
border-radius: 40px;
transform: rotate(-360deg);
}
.footer-bottom {
text-align: center;
margin-top: 2rem;
}
span {
color: yellow;
}
.text-container {
justify-content: space-between;
width: 20vw;;
font-size: 0.8rem;
}
/*POLICIES LINKS*/
.policies {
display: flex;
flex-direction: column;
font-size: 14px;
text-transform: uppercase;
}
.policies a {
color: yellow;
font-size: 10px;
line-height: 2rem;
}
.policies a:hover {
color: orangered;
}
/*MAP*/
.map {
margin-inline: auto;
}
/*SOCIAL MEDIA ICONS*/
.social-media-icons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sm-container {
display: flex;
justify-content: center;
gap: 2rem;
padding:1rem;
border: 1px black;
width: 100%;
height: 100%;
}
.sm-container a:active {
color: yellow;
}
.fa {
border-radius: 50%;
width: 100%;
height: 100%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
/**/
}
.fa-instagram {
background: #125688;
color: white;
padding: 1rem;
}
.fa-github {
background: white;
color: black;
padding: 1rem;
}
.fa-facebook {
background: #4267B2;
color: white;
padding: 1rem;
}
.fa-linkedin {
background: #3B5998;
color: white;
padding: 1rem;
}
.sm-icon {
transition: all 0.3s linear;
}
.sm-icon:hover {
transform: scale(1.2);
}
.fa:hover {
background-color: #fdcd3b;
}
/*MOBILE MENU*/
.mobile-menu {
display: none;
}
.mobile-menu {
display: flex;
width: 100%; /*.line a szülő tehát 40px a width*/
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
position: absolute;
top: 80px;
left: 0;
background-color: black;
transform: translate(-100%);
transition: all 0.4s ease;
z-index: 100;
}
.mobile-menu-on {
display: flex; /**/
transform: translate(0);
}
.m-menu {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: center;
font-size: 1.4rem;
}
/*hamburger icon*/
.header-right-gap {
width: 100px;
margin-left: 2rem;
}
.hamburger {
display: none;
position: fixed;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
top: 0;
left: 1;
margin-top: 1.5rem;
}
.hamburger:hover {
border: 6px solid;
border-color: yellow;
width: 43px;
margin-left: 4px;
transform: scale(1.2);
}
.hamburger:hover .line.line-1 {
/*display: none;*/
transform: rotate(45deg) translateY(7.5px);
background-color: yellow;
}
.hamburger:hover .line.line-2 {
display: none;
}
.hamburger:hover .line.line-3 {
/*display: none;*/
transform: rotate(-45deg) translateY(-7.5px);
background-color: yellow;
}
.line {
transition: all .4s ease;
width: 40px;
height: 5px;
background-color: white;
margin-block: 5px;
border-radius: 10px;
}
/*Media query*/
#media (max-width: 1200px) {
.hamburger {
display: block;
}
#desktop-menu {
display: none;
}
}
#media (max-width: 900px) {
footer nav ul {
flex-direction: column;
}
footer nav ul li a {
font-size: 15px;
/*padding: 15px;*/
}
}
#media (max-width: 750px) {
.footer-container {
display: flex;
flex-wrap: wrap;
}
footer nav ul li a {
font-size: 10px;
padding: 15px;
}
.text-container p {
font-size: 10px;
}
}
#media (max-width: 600px) {
.container form {
width: 470px;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
min-width: 300px;
max-width: 300px;
}
}
#media (max-width: 400px) {
.container {
max-width: 100%;
height: 100%;
overflow: hidden;
}
.container form {
max-width: 100%;
padding-top: 40px;
padding-bottom: 10px;
}
.container form input, h4 {
text-align: center;
}
.container form input {
width: 160px;
}
.container form #button, .container form h4 {
margin-inline: auto;
}
.container form textarea {
align-items: center;
min-width: 300px;
max-width: 300px;
}
.text-container {
width: 70vw;
}
.container form #button {
display: flex;
flex-direction: column;
}
footer {
width: 400px;
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
}
}
I once had a similar problem and it was due to margin of one element being bigger than it should be, and it just made that div bigger and pushed it out of viewport, so you could check your margins, I can see that you have quite a lot of margins, inline and to margin-right as well.
I have tried putting flex: 1 on both child elements of the .container(responsive - media query), and it's not working. Somehow my image (.container-img (div element)) is 'hiding'/overlapping/not showing.
I do not know where the issue might be in this case.
I would appreciate if someone more experienced took a look at this issue. Thank you!
<body>
<main class="main-container">
<div class="container">
<div class="container-img">
</div>
<div class="container-desc">
<span class="secondary-title">PERFUME</span>
<h1 class="main-title">Gabrielle Essence Eau De Parfum</h1>
<p class="text">
A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.
</p>
<div class="price">
<span class="price-current">$149.99</span>
<span class="price-discount">$169.99</span>
</div>
<button class="cart">
<img src="images/icon-cart.svg" alt="Shop">
<span class="cart-shop">Add to Cart</span>
</button>
</div>
</div>
</main>
</body>
body {
background: var(--clr-bg-main);
font-family: 'Montserrat', sans-serif;
margin: 0;
}
img {
display: block;
max-width: 100%;
object-fit: cover;
}
h1,
p {
margin: 0;
}
.main-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin: 2rem 1rem;
width: min(100% - 2rem, 800px);
min-height: 80vh;
display: flex;
flex-direction: column;
}
.container-img {
background: url('images/image-product-mobile.jpg');
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
flex: 1;
}
.container-desc {
background: var(--clr-neutral);
padding: 2rem;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: flex;
flex-direction: column;
}
.main-title {
font-family: 'Fraunces', serif;
font-size: var(--fs-title-primary);
line-height: 1;
margin-top: 1rem;
}
.secondary-title,
.text,
.price-discount {
color: var(--clr-dark-grayish-blue);
}
.secondary-title {
font-size: var(--fs-title-secondary);
letter-spacing: 5px;
}
.text {
font-size: var(--fs-text-primary);
margin-top: 1rem;
line-height: 1.6;
}
.price {
margin-top: 2rem;
display: flex;
gap: 2rem;
align-items: center;
}
.price-current {
font-family: 'Fraunces', serif;
font-size: var(--fs-text-current-price);
color: var(--clr-bg-button-price);
}
.price-discount {
text-decoration: line-through;
}
.cart {
cursor: pointer;
border: 0;
outline: none;
background: var(--clr-bg-button-price);
font-size: var(--fs-text-button);
font-weight: var(--fw-bold);
margin-top: 1.5rem;
padding: 1.5rem 6rem;
border-radius: 10px;
}
.cart:hover,
.cart:active {
background: var(--clr-bg-button-hover);
}
.cart img {
display: inline-block;
margin-right: 1rem;
}
.cart-shop {
color: var(--clr-neutral);
letter-spacing: 0.5px;
}
#media (min-width: 40em) {
.container {
min-height: 60vh;
flex-direction: row;
align-items: center;
}
.container-img {
background: url('images/image-product-desktop.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 100;
}
.container-desc {
flex: 1;
}
}
Actually, i found the solution to this problem, which of course is pretty simple one. I have been focusing on the parent instead of a child element .container-desc specifically to put 'justify-items: center'. Lack of concentration.
I am trying to get the links on the navbar to take full width and NOT take any of the area of the background image placed on the following section when the page is displayed on a smaller viewport #media (max-width: 900px).
Why is the hamburger menu icon not displaying?
I am trying to get navmenu items stacked and then a background image to display in full on a smaller viewport.
header {
position: fixed;
z-index: 100;
width: 100%;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--secondary-dark);
color: var(--main-white);
padding: 5px 30px;
height: 90px;
}
.logo {
font-size: var(--fs-600);
margin: 0.5rem;
text-decoration: none;
font-family: var(--ff-nav);
font-weight: var(--fw-400);
letter-spacing: 1px;
}
.navbar-items ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-items li a {
text-decoration: none;
color: var(--main-white);
padding: 1rem;
display: block;
}
.navbar-items li:hover a {
color: var(--blue-primary);
}
.toggle-button a {
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button a .bar {
height: 3px;
width: 100%;
background-color: var(--main-white);
border-radius: 10px;
}
#media (max-width: 900px) {
.toggle-button {
display: flex;
}
.navbar-items {
/* display: none; */
width: 100%;
background-color: var(--secondary-dark);
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-items ul {
flex-direction: column;
width: 100%;
}
.navbar-items li {
text-align: center;
}
.navbar-items li a {
padding: .5rem 1rem;
width: 100;
}
.navbar-items.active {
display: flex;
}
}
/* //////////////////////
Main
/////////////////////// */
.welcome {
position: relative;
outline: 2px solid red;
padding-top: 70px;
height: 700px;
background-image: url("/img/background.png");
background-position: center;
background-size: cover;
}
.welcome p {
position: absolute;
display: block;
bottom: 0;
right: 0;
margin: 20px 50px;
font-size: 3em;
color: var(--clr-section-background);
letter-spacing: 0.5px;
}
<header>
<nav class="navbar">
<div class="logo">
<span>Brand</span>
</div>
<div>
<a href="#">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
</div>
<div class="navbar-items">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
Blog
</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</header>
<!--mission statement------------------------------------------>
<section class="welcome">
<div>
<p>#OnPoint</p>
</div>
</section>
Problem resolved, I just needed to add a z-index on navbar and remove padding on ul in order to have the hamburger menu displaying on full width on smaller viewports.
In the snippet below, I have a card. In mobile/tablet, the video sits on top of the text content. In desktop, the content moves to the right, the video to the right.
The video should sit at the vertical center of the content div. I've tried align-items: center;, but it's not working and I think it might have something to do with the video, but I'm not sure.
I'm looking for the cleanest way to vertically align the video container with the content div on the left, then overlay the video container on top of the content div.
This is is the current setup:
// Video Thumbnail Script
$('.vid-thumb').on('click', function () {
$(this).remove();
$('.vid-ct').prepend(
'<script src="https://fast.wistia.com/embed/medias/2uzup7d1l3.jsonp" async><\/script><script src="https://fast.wistia.com/assets/external/E-v1.js" async><\/script><div class="wistia_embed wistia_async_2uzup7d1l3 videoFoam=true" style="width:100%;"> </div>'
);
window._wq = window._wq || [];
_wq.push({
id: '2uzup7d1l3',
onReady: function (video) {
video.play();
}
});
});
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
color: #000a70;
}
a {
text-decoration: none;
}
.img-fluid {
width: 100%;
height: auto;
}
.container {
padding-right: 24px;
padding-left: 24px;
width: 100%;
}
.people-love-nextiva h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-slider {
display: flex;
flex-direction: column;
}
#media (min-width: 1200px) {
.video-slider {
flex-flow: row;
align-items: center;
}
}
.video-slider__video {
order: 1;
}
.video-slider__video .vid-ct {
width: 100%;
}
#media (min-width: 768px) {
.video-slider__video .vid-ct {
min-height: 388px;
}
}
#media (min-width: 992px) {
.video-slider__video .vid-ct {
min-height: 524px;
}
}
#media (min-width: 1024px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
#media (min-width: 1200px) {
.video-slider__video {
max-width: 50%;
order: 2;
}
}
.video-slider__content {
padding: 2rem;
background: #F2F5F9;
order: 1;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: flex;
flex-direction: column;
}
#media (min-width: 1200px) {
.video-slider__content {
order: 1;
justify-content: center;
height: 600px;
padding: 10rem 18.5rem 10rem 4rem;
}
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.txt-link {
display: inline-flex;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.125rem;
position: relative;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="people-love-nextiva">
<h2>People love Animals.</h2>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb">
<img class="img-fluid vid-thumb-img lazy" loading="lazy" srcset="https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg?auto=format&w=576&h=416 576w,
https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg?auto=format&w=768w&h= 768w"
src="https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg&w=576"
sizes="(min-width: 320px) 100vw" alt="Phat Scooters - A Nextiva Customer Success Story">
</div>
</div>
</div>
<div class="video-slider__content">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Company Name</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, porro.</p>
<span class="txt-link arrow-link">
Read more
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
</div>
I do not believe there is one "best" solution, as there are multiple solutions, one will probably match better than another according to your HTML structure:
.my-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
// align vertically and horizontally:
// left: 50%;
// transform: translate(-50%, -50%);
}
Another way would be to do it through the flexbox property:
.parent {
display: flex;
}
.parent .child {
margin: auto;
}
And another one through table-cell:
.parent p {
display: table-cell;
vertical-align: middle;
}
To overlay I would probably go with the first solution as it lets you easily play with the position, and then put a z-index to make sure the video is the first layer.
Otherwise (personally dislike) I would play with negative margin on your video container.
In the snippet below, you'll see that in screen sizes under 768px, I can see the video and content beneath it. When I go to anything above 768px, the video disappears.
Why does the video disappear when going from flex-direction: column; to flex-direction: row;?
Codepen here if you'd prefer...
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
color: #000a70;
}
a {
text-decoration: none;
}
.container {
padding-right: 24px;
padding-left: 24px;
width: 100%;
}
.people-love-cats h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-slider {
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.video-slider {
flex-direction: row;
}
}
.video-slider__video {
/* embed video */
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-slider__video iframe,
.video-slider__video object,
.video-slider__video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-slider__content {
padding: 2rem;
background: #f2f5f9;
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.txt-link {
display: inline-flex;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.125rem;
position: relative;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
}
<div class="container">
<div class="people-love-cats">
<h2>People love Cats.</h2>
<div class="video-slider">
<div class="video-slider__video">
<iframe src='https://www.youtube.com/embed/2acZIOSV9LY' frameborder='0' allowfullscreen></iframe>
</div>
<div class="video-slider__content">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Company Name</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, maiores.</p>
<span class="txt-link arrow-link">
Read more
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
</div>
Hi,
Because No Width you add max-width:100% yeah .
But in your case mean width: 100% .
Just add specified width in the media query.
#media (min-width: 768px) {
.video-slider {
flex-direction: row;
}
.video-slider__content {
width: 50%;
}
.video-slider__video {
width: 50%;
}
}
See After Edit it working
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
color: #000a70;
}
a {
text-decoration: none;
}
.container {
padding-right: 24px;
padding-left: 24px;
width: 100%;
}
.people-love-cats h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-slider {
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.video-slider {
flex-direction: row;
}
.video-slider__content {
width: 50%;
}
.video-slider__video {
width: 50%;
}
}
.video-slider__video {
/* embed video */
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-slider__video iframe,
.video-slider__video object,
.video-slider__video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-slider__content {
padding: 2rem;
background: #f2f5f9;
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.txt-link {
display: inline-flex;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.125rem;
position: relative;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
}
<div class="container">
<div class="people-love-cats">
<h2>People love Cats.</h2>
<div class="video-slider">
<div class="video-slider__video">
<iframe
src="https://www.youtube.com/embed/2acZIOSV9LY"
frameborder="0"
allowfullscreen
></iframe>
</div>
<div class="video-slider__content">
<h6 class="kicker kicker--light">Customer Story</h6>
<h4>Company Name</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
maiores.
</p>
<span class="txt-link arrow-link">
Read more
<img
alt="arrow right icon"
class="learn-more-arrow"
src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg"
loading="lazy"
/>
</span>
</div>
</div>
</div>
</div>