I am using display:flex in order to center/vertically center the content on the page. I have set a media query so that there is a hamburger menu for mobile size. However, there appears to be a right margin on the homePage. No matter what I try, I can't get the margin to go away. Here's a jsfiddle of it. Please help!
http://jsfiddle.net/crcommons/Lxepj9ko/2/
(p.s. make sure you adjust the browser size so that it is in mobile).
$('.hamburger').on('click', function() {
$('.menu').slideToggle();
});
function setPageHeight () {
var windowHeight = $(window).height();
var headerHeight = $('header').height();
pageHeight = (windowHeight - headerHeight);
$('.homePage').css('min-height', pageHeight + 'px');
};
setPageHeight();
$(window).resize(setPageHeight);
*, *:after, *:before {
box-sizing: border-box
}
body {
font-size: 18px;
}
.container {
margin: 0 auto;
}
nav {
background-color: white;
max-width: 100%;
padding-top: .75em;
}
.mainNav {
max-width: 1024px;
margin: 0 auto;
}
.mainNav li {
width: 19%;
display: inline-block;
border-right: 1px solid black;
text-align: center;
}
.mainNav li:last-child {
border-right: none;
}
.hamburger {
display: none;
line-height: .3em;
}
.hamburger:before {
content: "≡";
}
.homePage {
background-color: #CBD5D2;
max-width: 100%;
display: flex;
}
.introduction {
max-width: 40em;
margin: auto;
}
.logo {
text-align: center;
}
.tagline {
font-size: 3em;
text-align: center;
}
.introduction p {
text-align: justify;
}
#media screen and (max-width: 479px) {
.wrapper {
padding: 1.5em;
}
nav {
display: none;
}
.hamburger {
display: inline-block;
font-size: 3.5em;
text-decoration: none;
float: right;
}
.navigation {
float: left;
float: left;
position: absolute;
right: 0;
margin-top: 30px;
padding: 0;
background: gray;
}
.mainNav {
padding: 0;
}
.mainNav li {
display: block;
padding: .5em;
width: 100%;
}
.homePage {
padding: 1em;
}
.tagline {
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<header>
<div>
</div>
<nav class="navigation menu">
<ul class="mainNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="homePage">
<div class="introduction">
<h1 class="logo">Title</h1>
<h2 class="tagline">Lorem ipsum dolor sit.</h2>
<p class="introP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nam velit, voluptates dolore consequuntur ea tempore laborum mollitia, corporis impedit distinctio aperiam itaque perspiciatis repellat neque facilis esse molestiae maiores eum, incidunt eius quaerat! Dicta illo ut, incidunt ratione magni cum unde architecto obcaecati illum harum tempora veniam placeat voluptatem.</p>
</div>
</div>
</body>
One option to solve this would be within the .hamburger class media query setting position: absolute; right: 0px;
This is happening because .hamburger is floating right, and there is nothing to clear the float. .homepage has a max-width: 100% but the width is not set. Since the homepage isn't 100%, it will float around the hamburger.
Clear the float:
header::after {
content: '';
display: block;
clear: both;
}
Set homepage width to 100%:
.homepage {
background-color: #CBD5D2;
max-width: 100%;
width: 100%;
display: flex;
}
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 am trying to make the search bar expand on device size < 768px. GIF Image.
How to fixed button when I click expand?
#media (max-width: 768px) {
.header-search {
margin-left: 1em;
.search-bar {
max-width: 3em;
margin-left: auto;
&:focus-within {
max-width: 100%;
.search-bar__input {
width: auto;
padding: 0 1em;
}
}
}
.search-bar__input {
width: 0;
padding: 0;
}
}
}
Here is my codepen:
https://codepen.io/phamtien990819/pen/PoqGwEv
I suggest remove the line width:auto in &:focus-within .search-bar__input.
Moreover, you can add padding transition to .search-bar__input to make the transition smoother
#media (max-width: 768px) {
.header-search {
margin-left: 1em;
.search-bar {
max-width: 3em;
margin-left: auto;
&:focus-within {
max-width: 100%;
.search-bar__input {
/*Remove width: auto*/
padding: 0 1em;
}
}
}
.search-bar__input {
width: 0;
padding: 0;
/*Add padding transition*/
transition: padding 3s
}
.search-bar__btn { }
}
}
This CSS code I updated. I used position: absolute; to place button on right of the bar. So even after input is opened button stays on right without moving.
#media (max-width: 768px) {
.header-search {
margin-left: 1em;
position: relative;
.search-bar__input {
margin-left: 10px;
background: transparent;
overflow: hidden;
}
.search-bar__btn {
width: 40px;
position: absolute;
right: 1px;
height: 29px;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
font-size: 14px;
}
ol,
ul {
padding: 0;
margin: 0;
list-style: none;
}
main {
flex: 1;
}
.material-icons {
font-size: 24px;
vertical-align: middle;
}
.material-icons::before {
content: attr(icon);
}
.site-header {
position: sticky;
top: -40px;
width: 100%;
z-index: 99;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.top-nav {
background: rgba(0, 0, 0, 0.03);
}
.top-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
}
.top-nav ul {
display: flex;
font-size: 12px;
list-style: none;
}
.top-nav ul>li+li {
margin-left: 1.5em;
}
.top-nav ul a {
color: currentColor;
}
.main-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 5em;
}
.header-brand {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-brand .logo {
text-decoration: none;
color: currentColor;
}
.header-brand .menu-toggle {
display: none;
border: 0;
outline: 0;
background: transparent;
margin-left: 1em;
padding: 6px;
}
/* BEGIN SEARCH BAR */
.header-search {
flex: auto;
margin-left: 4em;
}
.header-search .search-bar {
display: flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 25em;
height: 2.5em;
transition: all 3s;
}
.header-search .search-bar__input {
flex: auto;
height: 100%;
border: 0;
padding: 0 1em;
outline: 0;
}
.header-search .search-bar__btn {
width: 3em;
height: 100%;
border: 0;
outline: 0;
text-align: center;
}
#media (max-width: 768px) {
.header-search {
margin-left: 1em;
position: relative;
}
.header-search .search-bar__input {
margin-left: 10px;
background: transparent;
overflow: hidden;
}
.header-search .search-bar__btn {
width: 40px;
position: absolute;
right: 1px;
height: 29px;
}
.header-search .search-bar {
max-width: 3em;
margin-left: auto;
}
.header-search .search-bar:focus-within {
max-width: 100%;
}
.header-search .search-bar:focus-within .search-bar__input {
width: auto;
}
.header-search .search-bar__input {
width: 0;
padding: 0;
}
}
/* END SEARCH BAR */
.header-user {
display: flex;
align-items: center;
}
.header-user .item {
position: relative;
flex-shrink: 0;
display: inline-flex;
}
.header-user .item .user-link {
font-weight: 500;
color: currentColor;
padding: 6px;
border-radius: 4px;
margin-left: 8px;
}
.header-user .item .user-link:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.03);
}
#media (max-width: 768px) {
.s-header {
top: 0;
}
.top-nav {
display: none;
}
.main-nav .container {
height: 4em;
}
.header-brand .menu-toggle {
display: inline-block;
margin-left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header class="site-header">
<div class="top-nav">
<div class="container">
<ul>
<li>Top menu item</li>
<li>Top menu item</li>
<li>Top menu item</li>
<li>Top menu item</li>
<li>Top menu item</li>
</ul>
</div>
</div>
<nav class="main-nav">
<div class="container">
<div class="header-brand">
<a class="logo d-none d-md-inline-block" href="#">LOGO HERE</a>
<button class="menu-toggle">
<i class="material-icons" icon="menu"></i>
</button>
</div>
<div class="header-search">
<form action="#" class="search-bar">
<input class="search-bar__input" type="search" placeholder="Search..." />
<button class="search-bar__btn" type="button">
<i class="material-icons" icon="search"></i>
</button>
</form>
</div>
<ul class="header-user">
<li class="item">
<a class="user-link" href="#">
<i class="material-icons" icon="person_add"></i>
<span class="d-none d-md-inline">Login / Register</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container" style="height: 1000px">
<p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
<footer>
<div class="container">
<p>Footer content</p>
</div>
</footer>
</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%;
}
First post using Stackflow, and super excited to be starting off on my web development career, I am using Foundation 6 to build out my first website and was hoping someone could point out some key aspects of my code that would allow it to become more responsive.. Any help would be greatly appreciated as I am new to all of this!
Thanks!
/* Left Header Block */
.header-left-block {
background-image: url('../img/abstract_header_left.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.brand-title {
font-size: 75px;
position: relative;
color: #fff;
padding: 0px;
margin: auto;
padding-top: 260px;
font-family: poppins-Extralight;
}
/* Right Header Block */
.header-right-block {
background-color: #FCDA02;
background-repeat: no-repeat;
height: 100vh;
z-index: -2;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header-right-content {
}
.slash {
font-size: 125px;
color: #fff;
padding: 400px 0px;
}
.sub-header {
color: #fff;
font-size: 30px;
font-family: poppins-bold;
}
.search-text {
font-family: poppins-regular;
color: #fff;
display: inline-block;
padding: 25px 10px;
}
.top-btns {
height: auto;
display: inline-block;
position: absolute;
right: 0;
top: 0;
padding: 5px 30px;
}
/* Section Two */
.section-two {
background-color:;
height: 1000px;
width: 100%;
position: relative;
box-sizing: border-box;
padding: 50px;
margin-bottom: 100px;
}
.section-two:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
background: #00ACC2;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform-origin:;
transform: skewY(-30deg);
margin-top: -8px;
z-index: -1;
}
.section-two-container {
padding-bottom: 400px;
align-content: flex-start;
}
.number {
font-size: 20vw;
color: #fff;
font-family: poppins-mediumitalic;
}
.item-text {
text-align: left;
font-size: 2vh;
color: #fff;
padding: 2px;
}
.sub-header-one {
color: #fff;
font-size: 5vh;
font-family: poppins-bold;
text-align: left;
}
.squiggel {
z-index: 1;
}
/* Section Three */
.section-three {
background-color:;
height: 1200px;
width: 100%;
position: relative;
box-sizing: border-box;
padding: 50px;
margin-top: 0px;
}
.section-three:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
background: #83C200;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform-origin: top right;
transform: skewY(30deg);
z-index: -1;
}
.section-three-content {
margin-top: -1500px;
}
.iphone {
padding-left: 100px;
}
/* Section Four */
.section-four {
background-color:#111;
height: 1200px;
width: 100%;
position: relative;
box-sizing: border-box;
padding: 50px;
margin-top: -800px;
}
/* Menu */
/* Media Queries */
#media only screen and (max-width: 630px) {
.section-two-container {
margin-top: -200px;
}
.section-three-content {
margin-top: -100px;
}
.section-four {
margin-top: -225px;
}
.sub-header-one {
font-size: 4vh;
}
.number {
}
}
/* Font */
#poppins-bold {
font-family: poppins-bold;
src: url(../fonts/Poppins-Bold.ttf);
}
#poppins-regular {
font-family: poppins-regular;
src: url(../fonts/Poppins-Regular.ttf);
}
#poppins-Extralight {
font-family: poppins-extralight;
src: url(../fonts/Poppins-ExtraLight.ttf);
}
#poppins-MediumItalic {
font-family: poppins-mediumitalic;
src: url(../fonts/Poppins-MediumItalic.ttf);
}
/* Mouse Scroll */
p {
margin-left: -55px;
}
#-webkit-keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.scroll-btn {
display: inline-block;
position: relative;
left: 0;
right: 0;
text-align: center;
margin-bottom: 50px;
z-index: 100;
}
.scroll-btn > * {
display: inline-block;
line-height: 18px;
font-size: 13px;
font-weight: normal;
color: #7f8c8d;
color: #ffffff;
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
opacity: 0.8;
filter: alpha(opacity=80);
}
.scroll-btn .mouse {
position: relative;
display: block;
width: 35px;
height: 55px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid white;
border-radius: 23px;
}
.scroll-btn .mouse > * {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
background: white;
border-radius: 50%;
-webkit-animation: ani-mouse 2.5s linear infinite;
-moz-animation: ani-mouse 2.5s linear infinite;
animation: ani-mouse 2.5s linear infinite;
section class="grid-x align-middle section-two">
<section class="small-12 medium-5 section-two-container">
<div class="grid-x grid-container align-middle">
<div class="small-12 hide-for-small-only squiggel"><img src="img/red-squiggel.png" style=" height: 350px;"></div>
</div>
</section>
<section class="small-12 medium-7 section-two-container">
<div class="grid-x align-top grid-container ">
<div class="small-4 medium-4 large-5 flex-child-auto"><h1 class="number"> 1 </h1></div>
<div class="small-8 medium-8 large-7 flex-child-auto">
<h2 class="sub-header-one">website design and development</h2>
<p class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</section>
</section>
<!-- End Section Two -->
<section class="grid-x align-middle section-three">
<div class="section-three-content small-12 medium-7">
<div class="grid-x grid-container grid-padding-x align-center">
<div class="small-4 medium-4 large-5 "><h1 class="number"> 2 </h1></div>
<div class="small-8 medium-8 large-7 ">
<h2 class="sub-header-one">search engine optimization</h2>
<p class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
<div class="section-three-content grid-container small-12 medium-5 iphone"><img src="img/iphone-x.png"></div>
</section>
<section class="grid-x align-middle section-four">
</section>
I have checked several answers on this topic, but they are either not responsive or just don't work for me.
I have two columns and I would like the right one to always match the height of the left one. If there is too much content in the right column, make it scrollable. Is that possible?
I have one example for you (using table layout):
HTML:
<div class="row no-gutter">
<div class="row-same-height">
<div class="col-xs-6 col-xs-height">
<div class="content-left">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-6 col-xs-height col-top">
<div class="content-right">
<div class="content-box">
<h2>Responsive two sections (equal height)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.no-gutter.row {
margin-left: 0;
margin-right: 0;
}
.no-gutter > [class*="col-"],
.no-gutter .row-same-height > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
#media (min-width: 992px) {
.no-gutter-desktop.row {
margin-left: 0;
margin-right: 0;
}
.no-gutter-desktop > [class*="col-"],
.no-gutter .row-same-height > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
.inside {
margin-top: 20px;
margin-bottom: 20px;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
.inside-full-height {
height: 100%;
margin-top: 0;
margin-bottom: 0;
}
.content {
padding: 12px 3px;
}
.row-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-height {
display: table-cell;
float: none;
height: 100%;
}
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
}
#media (min-width: 480px) {
.row-xs-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-xs-height {
display: table-cell;
float: none;
height: 100%;
}
.col-xs-top {
vertical-align: top;
}
.col-xs-middle {
vertical-align: middle;
}
.col-xs-bottom {
vertical-align: bottom;
}
}
#media (min-width: 768px) {
.row-sm-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-sm-height {
display: table-cell;
float: none;
height: 100%;
}
.col-sm-top {
vertical-align: top;
}
.col-sm-middle {
vertical-align: middle;
}
.col-sm-bottom {
vertical-align: bottom;
}
}
#media (min-width: 992px) {
.row-md-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-md-height {
display: table-cell;
float: none;
height: 100%;
}
.col-md-top {
vertical-align: top;
}
.col-md-middle {
vertical-align: middle;
}
.col-md-bottom {
vertical-align: bottom;
}
}
#media (min-width: 1200px) {
.row-lg-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-lg-height {
display: table-cell;
float: none;
height: 100%;
}
.col-lg-top {
vertical-align: top;
}
.col-lg-middle {
vertical-align: middle;
}
.col-lg-bottom {
vertical-align: bottom;
}
}
[class*="col-"] {
background: #d6ec94;
}
.content-right {
overflow-y: auto;
}
JS:
var leftHeight = $('.content-left').height();
$('.right').css('max-height', leftHeight);
$(window).resize(function () {
var leftHeight = $('.content-left').height();
$('.content-right').css('max-height', leftHeight);
});
CODEPEN