I designed a website mobile-first and used a media query to make two columns sit next to each other once the screen expands. Instead it made a grid on my mobile version and I have whitespace on the bottom of my tablet version
If I switch the min to max it just goes to my mobile-first design ignores the media query CSS Grid altogether (as expected) for the tablet and desktop version
#media (min-width: 600px) {
.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-areas: 'bowl content';
height: 100%;
margin: 0px;
}
.right-col {
grid-area: content;
padding: 0 10%;
text-align: left;
align-self: center;
}
}
Here's the HTML if it helps
<section class="authentic">
<div class="right-col">
<h2>Authentic. Awesome.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aliquam id ullam vel quia voluptatem nobis nisi error nihil saepe!</p>
</div>
<img src="images/dumpling.jpeg" alt="Dumplings in a bowl" />
</section>
Here is the full HTML and CSS code for full reference:
HTML
<!doctype html>
<!-- Fun project to help me learn responsive layout design -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yummy Eats</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="hero-bg">
<section class="top">
<header>
yummy.eats
</header>
<h1><span>The Healthy </span> Eating Experience</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eius impedit porro similique officiis
eligendi, asperiores maxime est praesentium libero.</p>
<div class="form-container">
<form action="">
<div class="form-left">
<label for="city">Enter your city:</label>
<input type="text" name="city" id="city">
<p>Example: "San Diego"</p>
</div>
<input type="button" value="Find Food Now">
</form>
</div>
</section>
</div>
<section class="authentic">
<div class="right-col">
<h2> Authentic. Awesome.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aliquam id ullam vel quia voluptatem
nobis nisi error nihil saepe!</p>
</div>
<img src="images/dumpling.jpeg" alt="Dumplings in a bowl" />
</section>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
/*Margin affects outside. Padding affects inside */
/*Custom Properties */
:root {
--leading: 2em;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.hero-bg {
background: #307D99 url('images/bg.jpg');
color: white;
text-align: center;
padding-bottom: 4em;
padding-top: 1em;
/* for margin and padding its good to use em */
}
header {
padding: 1em 5em 3em 10em;
}
.hero-bg a {
color: white;
text-decoration: none;
/* ^^this removes url underlining */
font-weight: bold;
font-size: 1.2rem;
/*for text we use rem */
}
section {
margin: 0 1em;
}
h1 {
font-size: 2.5rem;
margin: 2em 0 1.2em;
}
h1 span {
text-transform: uppercase;
display: block;
/* display:block puts things on their own line, nothing is on the right or left to it */
font-size: 1.4rem;
position: relative;
z-index: 1;
}
h1 span::before {
content: ' ';
position: absolute;
width: 3em;
background: #00BFFF;
height: .4em;
bottom: 0;
z-index: -1;
margin-left: -.3em;
}
.hero-bg p {
font-weight: bold;
margin: 0 1em 3em;
/* font-size: .759rem; */
}
.form-container {
background-color: white;
margin: 2em -1em 0;
padding: 2em;
}
label {
color: #2D7D98;
font-weight: bold;
display: block;
margin-bottom: 1em;
font-size: 1.2em;
}
input[type=text] {
border: 1px solid #707070;
width: 100%;
padding: 1em;
border-radius: .5em;
margin-top: 1.2em;
box-sizing: border-box;
}
.form-container p {
color: gray;
margin-bottom: 1.5em;
font-weight: normal;
font-size: .9em;
margin-top: .3em;
}
input[type=button] {
background-color: #F89104;
border: none;
width: 100%;
color: white;
font-weight: bold;
padding: 1em 0;
border-radius: .5em;
font-size: 1.3em;
cursor: pointer;
}
input[type=button]:hover {
background-color: #bb690a;
}
.authentic {
margin: 0;
}
.right-col {
text-align: center;
margin: 3em 1em;
}
h2 {
text-transform: uppercase;
position: relative;
}
h2::before {
content: ' ';
position: absolute;
width: 8em;
background: #00BFFF;
height: .4em;
bottom: 0;
z-index: -1;
margin-left: -.3em;
}
img {
width: 100%;
/* this is super important if you are using images to get your website to fit the entire page */
}
p {
line-height: var(--leading);
}
/* Media query put in place to change the width for the section (form) when the user enlarges the screen into desktop format */
#media (min-width: 730px) {
section {
margin: 0 4em;
}
.form-container {
margin: 2em 4em 0;
}
}
#media (min-width: 600px) {
.hero-bg {
text-align: left;
}
.hero-bg p {
margin: 0 0 3em;
}
.hero-bg section {
width: 65%;
}
.form-container {
margin: 2em 0 0;
padding: 2em;
border-radius: .5em;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
}
form {
display: flex;
}
.form-left {
width: 70%;
}
label {
margin: 0;
}
input[type="button"] {
height: fit-content;
font-size: 1.1em;
margin-left: 1em;
margin-top: 2.2em;
padding: .7em 0;
width: 30%;
}
/* CSS Grid Usage: put the text and bowl next to each other and then changed the order by putting the bowl on the left
since it came before content in grid-template-areas */
.hero-bg p {
margin-bottom: 0px;
}
.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-areas: "bowl content";
height: 100%;
margin: 0px;
}
.right-col {
grid-area: content;
padding: 0 10%;
text-align: left;
align-self: center;
}
img {
grid-area: bowl;
}
h2 {
margin: 0;
}
}
/* A fadeIn effect for the top section */
.top {
animation: fadeIn 4s forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-2em);
}
to {
opacity: 1;
transform: translateY(-2em);
}
#keyframes overlay {
0% {
opacity: 0;
}
30% {
1;
}
70% {
1;
}
100% {
0;
}
}
}
Concerning the height / whitespace at the bottom, you should add
html, body {
height: 100%;
}
Otherwise the .authentic element`s 100% height has no height to refer to.
Concerning the other details, you have to add more details (i.e. code) to your question (i.e. the full relevant CSS and HTML code, not only the media query and part of the HTML)
Related
I can not get the image area to take full size on a smaller viewport (max-width: 768px) when chaging the flex-item to column
Even under min-width a max-width set up on 100%, the image still shows on on a 760px by a mere 49.59px
I also made sure this would be an overflow issue, the viewport is set to a 100% anyways.
Here is my html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<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" type="text/css" href="./css/styles.css">
<link rel="stylesheet" type="text/css" href="./css/blog-styles.css">
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400&family=Open+Sans&family=Poppins&family=Raleway:wght#600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
<title>Blog</title>
<script type='text/javascript' src=js/templates.js></script>
</head>
<body>
<!-- Main Menu Section-->
<my-menu></my-menu>
<!-- about section-->
<section>
<div class="blog-post__cards">
<div class="blog-post">
<div class="blog-post__img">
<img src="/img/post-photo.jpg" alt="">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span>Sunday</span>
<spa>August 18 2021</spa>
</div>
<h1 class="blog-post__title">Blog Post Title</h1>
<p class="blog-post__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
</p>
Read More
</div>
</div>
<div class="blog-post">
<div class="blog-post__img">
<img src="/img/post-photo.jpg" alt="">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span>Sunday</span>
<spa>August 18 2021</spa>
</div>
<h1 class="blog-post__title">Blog Post Title</h1>
<p class="blog-post__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
</p>
Read More
</div>
</div>
<div class="blog-post">
<div class="blog-post__img">
<img src="/img/post-photo.jpg" alt="">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span>Sunday</span>
<spa>August 18 2021</spa>
</div>
<h1 class="blog-post__title">Blog Post Title</h1>
<p class="blog-post__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
</p>
Read More
</div>
</div>
</div>
</section>
<!-- Main Footer Section-->
<my-footer></my-footer>
</body>
And here I share the corresponding CSS
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*html {
font-family: "Roboto", sans-serif;
font-size: 10px;
}
*/
img {
width: 100%;
}
section {
font-family: "lato", sans-serif;
font-size: 10px;
width: 100%;
height: 10vp;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
background-color: #eee;
padding: 0 15px;
overflow: scroll;
}
.blog-post__cards {
width: 100%;
padding: 5em;
display: flex;
align-content: space-around;
align-items: flex-start;
flex-direction: column;
gap: 10em;
transform: scale(0.95);
}
.blog-post {
width: 850px;
height: 350px;
max-width: 98em;
padding: 5em;
background-color: #fff;
box-shadow: 0 1.4em 8em rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
border-radius: 0.8em;
}
.blog-post__img {
min-width: 35em;
max-width: 35em;
height: 30em;
transform: translateX(-8em);
position: relative;
}
.blog-post__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0.8em;
}
.blog-post__img::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to right,
rgba(79, 172, 254, 0.8),
rgba(0, 242, 254, 0.8)
);
box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);
border-radius: 0.8em;
}
.blog-post__date span {
display: block;
color: rgba(0, 0, 0, 0.5);
font-size: 2em;
font-weight: 600;
margin: 0.2em 0;
}
.blog-post__title {
font-size: 2.5em;
margin: .8em 0 1em;
text-transform: uppercase;
color: #4facfe;
}
.blog-post__text {
margin-bottom: 3em;
font-size: 1.4em;
color: rgba(0, 0, 0, 0.7);
}
.blog-post__cta {
display: inline-block;
padding: 1.2em 3em;
margin-top: 0.5em;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1.2em;
color: #fff;
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
border-radius: 0.8em;
text-decoration: none;
float: right;
}
.blog-post__cta:hover {
background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}
#media screen and (max-width: 1068px) {
.blog-post {
max-width: 80em;
}
.blog-post__img {
min-width: 30em;
max-width: 30em;
}
}
#media screen and (max-width: 868px) {
.blog-post {
max-width: 70em;
}
}
#media screen and (max-width: 768px) {
.blog-post {
padding: 2.5em;
flex-direction: column;
}
.blog-post__img {
min-width: 100%;
max-width: 100%;
transform: translate(0, -4em);
}
}
Thank you so much for taking a looking a look into this! I am working as much as I can with flex items so any feedback that could be applied to this project would be highly appreciated.
Thank you!
Sometimes it's difficult to try and replicate an issue in Stack Overflow without an editable example. However, I pasted parts of your code into the editor to try and replicate. Are you wanting the image to expand to the entire width of the viewport at your mobile breakpoint?
Inside the mobile styles, I removed a lot of padding and the transform rules that were set on the parent containers, so it may be a combination of all/some of those rules.
#media screen and (max-width: 768px) {
section {
width: 100%;
}
.blog-post {
padding: 0;
flex-direction: column;
height: unset;
max-width: 100%;
}
.blog-post__cards {
transform: scale(1);
}
.blog-post__cards{
padding: 0;
}
.blog-post__img {
min-width: 100%;
max-width: 100%;
width: 100%;
transform: translate(0, -4em);
}
.blog-post__info {
padding: 0 1rem 2rem;
}
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*html {
font-family: "Roboto", sans-serif;
font-size: 10px;
}
*/
img {
width: 100%;
}
section {
font-family: "lato", sans-serif;
font-size: 10px;
width: 100%;
height: 10vp;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
background-color: #eee;
padding: 0 15px;
overflow: scroll;
}
.blog-post__cards {
width: 100%;
padding: 5em;
display: flex;
align-content: space-around;
align-items: flex-start;
flex-direction: column;
gap: 10em;
transform: scale(0.95);
}
.blog-post {
width: 850px;
height: 350px;
max-width: 98em;
padding: 5em;
background-color: #fff;
box-shadow: 0 1.4em 8em rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
border-radius: 0.8em;
}
.blog-post__img {
min-width: 35em;
max-width: 35em;
height: 30em;
transform: translateX(-8em);
position: relative;
}
.blog-post__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0.8em;
}
.blog-post__img::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to right,
rgba(79, 172, 254, 0.8),
rgba(0, 242, 254, 0.8)
);
box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);
border-radius: 0.8em;
}
.blog-post__date span {
display: block;
color: rgba(0, 0, 0, 0.5);
font-size: 2em;
font-weight: 600;
margin: 0.2em 0;
}
.blog-post__title {
font-size: 2.5em;
margin: .8em 0 1em;
text-transform: uppercase;
color: #4facfe;
}
.blog-post__text {
margin-bottom: 3em;
font-size: 1.4em;
color: rgba(0, 0, 0, 0.7);
}
.blog-post__cta {
display: inline-block;
padding: 1.2em 3em;
margin-top: 0.5em;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1.2em;
color: #fff;
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
border-radius: 0.8em;
text-decoration: none;
float: right;
}
.blog-post__cta:hover {
background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}
#media screen and (max-width: 1068px) {
.blog-post {
max-width: 80em;
}
.blog-post__img {
min-width: 30em;
max-width: 30em;
}
}
#media screen and (max-width: 868px) {
.blog-post {
max-width: 70em;
}
}
#media screen and (max-width: 768px) {
section {
width: 100%;
}
.blog-post {
padding: 0;
flex-direction: column;
height: unset;
max-width: 100%;
}
.blog-post__cards {
transform: scale(1);
}
.blog-post__cards{
padding: 0;
}
.blog-post__img {
min-width: 100%;
max-width: 100%;
width: 100%;
transform: translate(0, -4em);
}
.blog-post__info {
padding: 0 1rem 2rem;
}
}
<section>
<div class="blog-post__cards">
<div class="blog-post">
<div class="blog-post__img">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=800&height=600" alt="">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span>Sunday</span>
<span>August 18 2021</span>
</div>
<h1 class="blog-post__title">Blog Post Title</h1>
<p class="blog-post__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!</p>
Read More
</div>
</div>
</div>
</section>
i have a page which consists of css cards everything is working fine but the only problem is text which i need to display on css cards is over flowing (but i want it to be displayed with in the card).
and one more thing to be fixed is hover effect, when i hover over an element remaining css cards are arranged in zig zag manner.
check the following code.
<!DOCTYPE html>
<html>
<head>
<title>Easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.self{
margin-left:160px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
margin-bottom: 20px;
flex-basis: 25%;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Responsive columns
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
transition: width 2s,height 4s;
transition-timing-function: ease-in-out;
}
.card:hover{
background-color: lightgreen;
transition-timing-function: ease-in-out;
width: 300px;
height: 300px;
}
</style>
</head>
<body style="background-color: #dae2e3;">
<div class="self">
<div class="column w3-button">
<div class="card">
<h1><?php echo"$value"; ?></h1>
<h3 style="overflow-x:page-break-inside:inherit;"><?php echo"$description";?></h3>
<h3><?php echo"$index";?></h3>
</div>
</div>
</div>
<?php }?>
This problem is produced because you gave fixed height to the card when hover.
Remove height: 300px; and your hover problem will be gone.
.self {
margin-left: 160px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
margin-bottom: 20px;
flex-basis: 25%;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
transition: width 2s, height 4s;
transition-timing-function: ease-in-out;
}
.card:hover {
background-color: lightgreen;
transition-timing-function: ease-in-out;
width: 300px;
/*height: 300px;*/
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<body style="background-color: #dae2e3;">
<div class="self">
<div class="column w3-button">
<div class="card">
<h1>my card have an overflow problem</h1>
<h3 style="overflow-x: page-break-inside:inherit;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quisquam voluptate velit perferendis. Vel, cum dignissimos consequatur recusandae quisquam, quibusdam! Amet possimus sunt veritatis quos, nostrum minima deleniti, voluptatem repellat.</h3>
<h3>1</h3>
</div>
</div>
</div>
</body>
So I have this black transparent box in my header. It's got some text inside. When the text shrinks I want the the box to shrink as well, but I want it to shrink proportionately. The problem I'm running into is that when I shrink the text in my media queries, the width of the p tags doesn't shrink with it. so This pushes the right side of its parent farther out making it disproportional. I've tried setting the p tags to inline but then the parent won't shrink to fit the tags unless I set the parent to inline. And If I do that I need to use flexbox to stack the p tags on top of each other again, and I can't use display: flex cause its already display: inline. Any Ideas?
const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links div'));
const header = document.querySelector('header');
const form = document.querySelector('form');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < linksArray.length; i++) {
linksArray[i].addEventListener('click', shuffle);
}
function changeColor() {
let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexColor = '#';
for(let i = 0; i < 6; i++) {
let random = Math.floor(Math.random()*hexArray.length);
hexColor += hexArray[random];
}
header.style.backgroundImage = 'none';
header.style.backgroundColor = hexColor;
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function shuffle() { // Fisher-Yates shuffle algorithm
for (let i = linksArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML];
}
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('.name').value;
const address = document.querySelector('.address').value;
const city = document.querySelector('.city').value;
const dialog = document.querySelector('.dialog-wrap');
const close = document.querySelector('.close');
dialog.style.display = 'block';
document.querySelector('.dialog-name').innerHTML = name;
document.querySelector('.dialog-address').innerHTML = address;
document.querySelector('.dialog-city').innerHTML = city;
close.onclick = () => {
dialog.style.display = 'none';
document.querySelector("form").reset();
}
})
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
* {
outline: 1px solid red;
}
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
box-shadow: 0px 0px 70px rgb(99, 99, 99, 0.5);
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
background-position: center;
background-size: cover;
padding-top: 7%;
padding-bottom: 25%;
}
.header-info {
display: inline-block;
color: #fff;
font-size: 1.5rem;
background-color: rgba(0,0,0,0.6);
padding: 35px;
margin-left: 10%;
}
header p {
margin: 0;
padding: 0;
}
header p:first-child {
margin-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
background-color: #fff;
}
.col {
flex-basis: 33.33%;
padding: 50px 0 40px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 15%;
font-size: 1.5rem;
}
.links div {
margin:2px 0;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
margin-top: 30PX;
color: #fff;
}
.links {
font-size: 1.2rem;
display: flex;
flex-direction: column;
}
.form-wrap {
padding-top: 30px;
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 100px 0 0;
display: flex;
flex-direction: column;
width: 100%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
.dialog-wrap {
background-color: rgba(0,0,0,0.7);
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1000;
display: none;
}
dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 220px;
border: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
dialog div {
font-size: 1.4rem;
color: #fff;
margin: 10px 0;
outline: 1px solid #63889b;
}
dialog div:first-child {
margin-top: 0px;
}
dialog .label {
background-color: #63889b;
padding: 7px;
display: inline-block;
width: 30%;
margin: 0;
text-align: center;
}
dialog .info {
display: inline-block;
padding-left: 5px;
color: #000;
}
dialog button {
border: none;
width: 100%;
margin: auto;
padding: 7px;
}
dialog button:hover {
cursor: pointer;
transition: all .3s ease;
background-color: #0675ad;
}
dialog div:last-child {
outline: none;
}
#media screen and (max-width: 1600px) {
.header-info {
font-size: 1.4rem;
width: 392px;
margin-left: 7%;
}
}
#media screen and (max-width: 1400px) {
.col p, .links {
font-size: 1.1rem;
}
}
#media screen and (max-width: 1200px) {
nav {
font-size: 1.5rem;
}
.header-info {
font-size: 1.3rem;
}
.col-1 img {
width: 270px;
height: 132px;
}
.col-2 img {
width: 280px;
height: 107px;
}
.col-3 img {
width: 250px;
height: 140px;
}
.col p, .links, label {
font-size: 1rem;
}
}
#media screen and (max-width: 1000px) {
.col p {
width: 85%;
}
.col-1 img {
width: 230px;
height: 112px;
}
.col-2 img {
width: 220px;
height: 82px;
}
.col-3 img {
width: 210px;
height: 120px;
}
button {
font-size: 1.1rem;
}
dialog div {
font-size: 1.2rem;
}
}
#media screen and (max-width: 925px) {
}
#media screen and (max-width: 900px) {
.header-info {
font-size: 1.1rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
<div>Page One</div>
<div>Another Page</div>
<div>Sales Page</div>
<div>Page Three</div>
<div>Keep Going</div>
<div>Last One</div>
<div>Just Kidding</div>
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" class="name" required>
<label for="Name">Address</label>
<input type="text" class="address" required>
<label for="Name">City</label>
<input type="text" class="city" required>
<button type="submit" id="submit">Submit Form</button>
</form>
<div class="dialog-wrap">
<dialog>
<div><span class="label">Name:</span><span class="dialog-name info"></span></div>
<div><span class="label">Address:</span><span class="dialog-address info"></span></div>
<div><span class="label">City:</span><span class="dialog-city info"></span></div>
<div><button class="close">Close</button></div>
</dialog>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
I can't use magic numbers.
How do you shrink the text?
I tried your code and it seems to scale fine when the font size is modified in 'header p' with the font-size CSS property.
header p {
font-size: 50%;
}
I just can't figure out why this grid I've set extends below the viewport.
Besides the logo-cell, the other two cells in the vertical grid are fractional. Basically, independent of viewport size, the footer section extends below the bottom of the viewport. I'd like the page to size itself so you don't have to scroll on desktop.
#import url('https://use.typekit.net/vlv0duo.css');
html {
overflow: hidden;
height: 100%;
}
body {
font-family: objektiv-mk1, sans-serif;
font-style: normal;
background-color: #141414;
color: #e5e5e5;
height: 100%;
overflow: auto;
margin: 0;
}
section {
display: grid;
grid-template-rows: calc(60px + 8vh) 1fr 1fr;
grid-template-columns: 1fr;
grid-gap: 0px 0px;
position: relative;
height: 100%;
margin: 2.6vw;
}
.nav {
margin-bottom: 8vh;
}
.icon-logo {
background: url(sub_logo-01.svg) no-repeat;
width: 150px;
height: 60px;
display: inline-block;
position: relative;
color: #e5e5e5;
}
h1 {
font-size: 34px;
font-weight: 200;
line-height: 49px;
text-align: Left;
max-width: 85%;
margin: 0 0 25px 0;
padding: 0;
}
h2 {
font-size: 18px;
font-weight: 300;
line-height: 26px;
text-align: Left;
max-width: 60%;
margin: 0 0 25px 0;
padding: 0;
}
h3 {
font-family: objektiv-mk1, sans-serif;
font-size: 12px;
line-height: 22px;
font-weight: 500;
margin: 0;
padding: 0;
}
a {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 500;
}
a.body-link {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 200;
}
a#header-link {
white-space: nowrap;
}
div.cell {
grid-column: span 1;
grid-row: span 1;
position: relative;
}
div.cell#text {
font-weight: 200;
font-size: 12px;
line-height: 18px;
}
div.cell {
grid-column: span 1;
grid-row: span 1;
position: relative;
}
div.cell#footer {
position: relative;
align-self: end;
}
div.footer {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 0px 50px;
}
div.mark {
font-weight: 200;
font-size: 12px;
line-height: 18px;
align-items: end;
grid-column: span 2;
grid-row: span 1;
}
div#social {
position: relative;
bottom: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
white-space: nowrap;
}
<section>
<div class="nav">
<a class="navlogo" href="www.relicstudio.co">
<div class="icon-logo"></div>
</a>
</div>
<div class="cell">
<h1>
An independent design studio.
<br><br> We use the past to inform the present, leveraging creative and strategic solutions to projects of all types and sizes.
</h1>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus sollicitudin velit, sed porta lectus accumsan nec. Sed nec diam quis neque pretium tristique. Request Advance Work Samples
</h2>
</div>
<div class="cell" id="footer">
<div class="footer">
<div class="cell" id="text">
<h3 id="heading">
Capabilities
</h3>
<br>
<ul>
<li>Naming</li>
<li>Editorial</li>
<li>Packaging</li>
<li>Tone & Voice</li>
<li>Art Direction</li>
<li>Brand Strategy</li>
<li>Identity System</li>
<li>Interface Design</li>
<li>Experience Design</li>
<li>Environmental Design</li>
</ul>
</div>
<div class="cell" id="text">
<h3 id="heading">
New Business
</h3><br>
telegram#relicstudio.co
<div id="social">
<h3 id="heading">
Follow For The Latest
</h3><br>
<ul>
<li>twitter</li>
<li>instagram</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Reworked/simplified your HTML/CSS to fix height issues. Demo:
#import url('https://use.typekit.net/vlv0duo.css');
/* to include padding and border in height */
* {
box-sizing: border-box;
}
body {
font-family: objektiv-mk1, sans-serif;
font-style: normal;
background-color: #141414;
color: #e5e5e5;
margin: 0;
/* set min-height to screen height */
min-height: 100vh;
/* now body is grid container instead of section */
display: grid;
/* set min-content for footer to be placed at the very bottom */
grid-template-rows: calc(60px + 8vh) 1fr min-content;
/* replace margin for section with padding for body */
padding: 2.6vw;
}
.nav {
margin-bottom: 8vh;
}
.icon-logo {
background: url(sub_logo-01.svg) no-repeat;
width: 150px;
height: 60px;
display: inline-block;
position: relative;
color: #e5e5e5;
}
h1 {
font-size: 34px;
font-weight: 200;
line-height: 49px;
text-align: left;
max-width: 85%;
margin: 0 0 25px 0;
padding: 0;
}
h2 {
font-size: 18px;
font-weight: 300;
line-height: 26px;
text-align: left;
max-width: 60%;
margin: 0 0 25px 0;
padding: 0;
}
h3 {
font-family: objektiv-mk1, sans-serif;
font-size: 12px;
line-height: 22px;
font-weight: 500;
margin: 0;
padding: 0;
}
a {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 500;
}
a.body-link {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 200;
}
a#header-link {
white-space: nowrap;
}
div.cell {
position: relative;
}
div.cell#text {
font-weight: 200;
font-size: 12px;
line-height: 18px;
}
div.cell {
position: relative;
}
div.cell#footer {
position: relative;
}
div.footer {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 0px 50px;
}
div.mark {
font-weight: 200;
font-size: 12px;
line-height: 18px;
align-items: end;
grid-column: span 2;
grid-row: span 1;
}
div#social {
position: relative;
bottom: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
white-space: nowrap;
}
<div class="nav">
<a class="navlogo" href="www.relicstudio.co">
<div class="icon-logo"></div>
</a>
</div>
<div class="cell">
<h1>
An independent design studio.
<br><br> We use the past to inform the present, leveraging creative and strategic solutions to projects of all types and sizes.
</h1>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus sollicitudin velit, sed porta lectus accumsan nec. Sed nec diam quis neque pretium tristique. Request Advance Work Samples
</h2>
</div>
<div class="cell" id="footer">
<div class="footer">
<div class="cell" id="text">
<h3 id="heading">
Capabilities
</h3>
<br>
<ul>
<li>Naming</li>
<li>Editorial</li>
<li>Packaging</li>
<li>Tone & Voice</li>
<li>Art Direction</li>
<li>Brand Strategy</li>
<li>Identity System</li>
<li>Interface Design</li>
<li>Experience Design</li>
<li>Environmental Design</li>
</ul>
</div>
<div class="cell" id="text">
<h3 id="heading">
New Business
</h3><br>
telegram#relicstudio.co
<div id="social">
<h3 id="heading">
Follow For The Latest
</h3><br>
<ul>
<li>twitter</li>
<li>instagram</li>
</ul>
</div>
</div>
</div>
</div>
Hey guys I'm following the W3S tutorials and I want to archive the parallax effect. I've tried many times and I don't know why the picture doesn't show.
I did the exact same thing on another project and it worked just fine. I really don't know what I did wrong. My reputation it's kinda bad here because of my "stupid questions", so I'm sorry if this question offend someone.
Have a look at my code:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 19px;
line-height: 1.6;
}
#showcase {
background-image: url('https://picsum.photos/g/1900/1080?random');
height: 100vh;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: top;
}
.button {
background-color: black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.Bshadow:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.pacifont {
font-family: 'Pacifico', cursive;
font-size: 4.8rem;
color: white;
}
.name {
color: #008c06;
}
.topnav {
overflow: hidden;
/* background-color: #333; */
border-bottom: 3px solid #008c06;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #008c06;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.parallax {
/* The image used */
background-image: url("https://picsum.photos/500/1081/?random'");
/* Full height */
height: 100%;
width: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<header id="showcase">
<div class="topnav sticky" id="myTopnav">
Home
News
Contact
About
☰
</div>
<h1 class="pacifont">Welcome <a class="name">Felix!</a></h1>
READY?
</header>
<a class="weatherwidget-io" href="https://forecast7.com/en/50d854d35/brussels/" data-label_1="Bruxelles" data-font="Jura" data-icons="Climacons Animated" data-days="3" data-theme="gray">Bruxelles</a>
<h1>wtf</h1>
<div class="parallax"></div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus odit dolorum sed ut, doloremque consectetur.</p>
Change the height of .parallax class to 100vh instead of 100%.