i'm trying to recreate this template through the use of Grid. I can't figure how to create the background-image behind what i've already created
in my markup. Image what i'm after refrence image any tips?
check my website, what have i already done, i thought to use z-indexing, but it didn't worked.. also if i apply it to the body, it will stretch with the additional content after the header section.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Montserrat', sans-serif, arial;
}
a{
color: black;
}
body{
background-color: red;
margin: 0 auto;
width: 80%;
}
/* .background-image{
background-image: url(../img/bgheader.jpg);
background-repeat: no-repeat;
background-size: cover;
grid-column: 1 / -1;
grid-row: 1 / 4;
} */
#grid-container{
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 1rem;
}
header{
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 11fr;
grid-template-rows: 1fr 10fr 1fr 4fr;
margin-top: 5rem;
}
header ul{
display: flex;
justify-content: flex-end;
}
header ul li:nth-child(-n+3){
margin-right: 3rem;
}
header ul a{
text-transform: uppercase;
font-weight: 400;
color: white;
}
header a:hover{
color: grey;
}
.slogan{
grid-row: 2 / 3;
grid-column: 1 / 3;
justify-self: center;
align-self: center;
text-align: center;
}
.slogan h1{
font-size: 2.5rem;
color: white;
margin-bottom: 1rem;
text-transform: uppercase;
}
.more{
color: white;
}
.services{
color: #4a4747;
grid-row: 4 / 5;
grid-column: 1 / 3;
justify-self: center;
align-self: center;
text-align: center;
padding: 0 20rem;
}
.services h2{
margin-bottom: 1rem;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Brackets Junior</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div id="grid-container">
<!-- Header Section -->
<header>
<img class="logo" src="img/logo.png" alt="logo">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</nav>
<div class="slogan">
<h1>Always a step ahead go pro</h1>
Learn more..
</div>
<div class="services">
<h2> We provide the best services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia voluptatum blanditiis expedita ducimus fugit rem, qui repellat, quos totam ipsa reprehenderit eum laboriosam maiores. Eum fugit provident error velit soluta, praesentium enim dolorum architecto, quis quisquam magnam! Sequi voluptas consequatur dolor asperiores rem eaque voluptatem necessitatibus laborum alias, omnis atque.</p>
</div>
</header>
</div>
</body>
</html>
Just apply your background to the header.
header{
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 11fr;
grid-template-rows: 1fr 10fr 1fr 4fr;
margin-top: 5rem;
background-image: url(../img/bgheader.jpg);
background-repeat: no-repeat;
background-size: cover;
}
I am not sure why your header includes your page contents, nor why you are placing the header grid inside the page grid. These things might be revisited.
write some text in header or li components and then apply min padding of 400px
or top and bottom padding of 200px. this will resolve your problem
Related
I'm trying to do a media query and I'm using flexbox so that the image and text change size when they fit a certain parameter but I don't know how to do it
the section consists of a title and a description and on the right side an image with animation so that it moves up and down
.home{
display: flex;
align-items: center;
justify-content: center;
background: url(../images/home-bg-img.png) no-repeat;
background-size: cover;
background-position: center;
}
.home .image img{
width:40vw;
animation: float 3s linear infinite;
}
#keyframes float{
0%, 100%{
transform: translateY(0rem);
}
50%{
transform: translateY(-3.5rem);
}
}
.home .content h3{
font-size: 5.5rem;
color: #333;
text-transform: uppercase;
}
.home .content p{
font-size: 1.7rem;
color: #666;
padding:1rem 0;
}
the media query consists only of positioning the image at the top and the text at the bottom.
also when it is below 803px the image should be reduced along with the text
#media(max-width:803px){
.home{
flex-flow: column-reverse;
}
.home .image img{
width:100%;
}
.home .content h3{
font-size: 3.6rem;
}
.home .content p{
font-size: 1.5rem;
}
}
The flex-flow: column-reverse; works for me but the text and the image do not change their size
here I leave the html
<section class="home" id="home">
<div class="content">
<h3> la mejor aplicacion movil</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt laudantium sit pariatur alias. Doloribus atque facilis architecto ex harum porro iste magnam ad, doloremque, obcaecati omnis nisi</p>
Descargalo Ahora
</div>
<div class="image">
<img src="./images/home-img.png" alt="">
</div>
</section>
For fonts, you can use the css clamp() function to make the text more flexible.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. MDN
Also, for the image, we can limit the height and use theobject-fit: cover; property.
.home {
display: flex;
align-items: center;
justify-content: center;
background: url(../images/home-bg-img.png) no-repeat;
background-size: cover;
background-position: center;
}
.home .image img {
width: 40vw;
animation: float 3s linear infinite;
height: 350px; /* new line */
object-fit: cover; /* new line */
}
#keyframes float {
0%,
100% {
transform: translateY(0rem);
}
50% {
transform: translateY(-3.5rem);
}
}
.home .content h3 {
font-size: clamp(3.6rem, 5vw, 5.5rem); /* changed */
color: #333;
text-transform: uppercase;
}
.home .content p {
font-size: 1.7rem;
color: #666;
padding: 1rem 0;
}
#media (max-width: 803px) {
.home {
flex-flow: column-reverse;
}
.home .image img {
width: 100%;
height: auto; /* new line */
}
.home .content h3 {
font-size: clamp(2rem, 7vw, 3.6rem); /* changed */
}
.home .content p {
font-size: 1.5rem;
}
}
<section class="home" id="home">
<div class="content">
<h3>la mejor aplicacion movil</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt laudantium sit pariatur alias. Doloribus atque facilis architecto ex harum porro iste magnam ad, doloremque, obcaecati omnis nisi
</p>
Descargalo Ahora
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/dedede/0815c2.jpg" alt="" />
</div>
</section>
My Grid Container looks to be stuck inside of a "root" div when I inspect.
I'm wanting my middle row to take up all remaining height in the grid. Right now my grid is stuck to the top of the screen.
Here is my code:
*,
:root {
--dark: #12121f;
--dark-gray: #303133;
--light: #f7f8fc;
--accent: #380082;
--modal: #3949ab;
--sections: #1f85b4;
--text: #f5f5f5;
}
html {
height: 100%;
}
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
margin: 0;
}
code {
font-family: "Montserrat", source-code-pro, Menlo, Monaco, Consolas,
"Courier New", monospace;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--dark-gray);
color: var(--white);
}
.grid-container {
height: 100%;
margin: 20px;
display: grid;
grid-gap: 8px;
grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
grid-template-rows: [main-start] 100px [content-start] auto [content-end] 100px [main-end];
align-content: center;
justify-content: center;
border: purple 1px solid;
}
.header-grid {
grid-column: main;
font-size: 3rem;
text-align: center;
font-family: "Montserrat";
font-weight: bold;
text-shadow: 0px 4px 4px rgba(122, 123, 126, 0.45);
background: white;
}
.menu-grid {
background: white;
padding: 20px;
text-align: center;
align-content: center;
padding-top: 50px;
padding-bottom: 30px ;
}
.about-grid {
grid-area: content;
justify-content: center;
background: white;
padding: 20px;
}
.email-grid {
grid-column: main;
display: flex;
justify-content: space-around;
background: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
and here is my react component:
import React from "react";
const Contact = () => {
document.title = "Contact";
return (
<>
<div className="grid-container">
<div className="header-grid">The WholeSale Group</div>
<div className="menu-grid">
<ul>
<li>HOME</li>
<li>ORDERS</li>
<li>INVENTORY</li>
<li>STATEMENTS</li>
</ul>
</div>
<div className="about-grid">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
ut corporis. Voluptates quas, magni quisquam possimus id quam
cupiditate odio distinctio similique, atque fugit consequuntur
aperiam esse nihil voluptatum neque. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Pariatur, ut corporis. Voluptates
quas, magni quisquam possimus id quam cupiditate odio distinctio
similique, atque fugit consequuntur aperiam esse nihil voluptatum
neque.
</p>
</div>
<div className="email-grid">
<p>Sales: email#email.com</p>
<p>Support: email#email.com</p>
<p>Upline: email#email.com</p>
</div>
</div>
</>
);
};
export default Contact;
// TP-43
Here is a screenshot of my grid under inspection
Thanks in advance for any help!
I've tried setting root to 100% or 100vh and have also tried both options on html and body as well.
If I change the last value in my grid template rows to something like 700px; it stretches the whole view height. Likewise, if I change my content (middle) row value to the same, it stretches down further.
I put "auto" there so it would take up all remaining height of the page.
I also tried min-content with no luck.
I have a grid with a bunch of items. One of the items contains an image and some text. I want to float the text next to the image but can't get it to work...
See code below:
<div id="blog-post-item" class="blog-post">
<h1>Some amazing blogpost title about something super cool!</h1>
<div class="blog-post-content">
<div class="content-flex-container clearfix">
<img src="Data/Content/food_post5.jpg">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.</p>
</div>
</div>
</div>
body {
display: grid;
background: tomato;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: minmax(max-content, max-content);
column-gap: 20px;
row-gap: 20px;
}
.blog-post {
background: #fff;
border: 5px solid #fff;
border-radius: 10px;
display: grid;
grid-template-rows: minmax(auto, max-content) 1fr;
height: 100%;
grid-column: 2/-1;
width: 100%;
}
.blog-post h1 {
grid-row: 1;
grid-column: 1/-1;
}
.blog-post-content {
grid-row: 2;
}
.content-flex-container {
height: 100%;
width: 100%;
display: block;
}
.content-flex-container img {
height: 100%;
float: left;
}
.content-flex-container p {
float: left;
}
But this is the result i get:
as you can see the text is below the image not to the right of the image in the big white open space..
If more information is needed please let me know so i can clarify.
Background
On commercial TVs, there's a mode called Video Wall mode, where you can stretch a single desktop across multiple screens. Let's say I'm working with 4 screens, I'm trying to make a web page that appears like it's not stretched, which means on a normal single screen showing one desktop it will look like it's been compressed 4 times.
I've currently got a partial solution by creating a 4 desktop wide page, then using CSS trasform to scale the page by 1/4 horizontally.
Although images are blurry, that could be mitigated by excluding transformation on elements with images.
The issue
When the scaling transform is done, the fonts are pixelated as if they went through a bad (low quality) jpeg compression.
Below is my current code sample.
body {
font-family: Helvetica, Arial, sans-serif;
color: #333;
display: flex;
flex-flow: row;
white-space: nowrap;
overflow: hidden;
min-width: min-content;
animation: fadein 3s;
}
#keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
.screen {
display: grid;
grid: 50% auto / 50% auto;
}
.main {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-size: 100% 100%;
background-repeat: no-repeat;
float: left;
}
.dynamic {
grid-column: 1 / 2;
grid-row: 2 / 3;
float: left;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.list {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.dynamic .item {
position: relative;
height: 100%;
width: 49.8%;
}
.dynamic .item > div {
position: relative;
transform-origin: left;
}
.dynamic .item .name {
display: block;
}
.dynamic .item .header > * {
display: inline-flex;
}
.dynamic .item .values > * {
display: inline-flex;
}
#media (min-aspect-ratio: 16/9) {
body {
font-size: 4vh;
height: 100vh;
}
.screen {
width: calc(8000vh/(9*5));
height: 100vh;
}
.dynamic .text { font-size: 2vh }
.dynamic .name > * { font-size: 4vh }
.list { font-size: 2vh }
.list .title { font-size: 4vh }
}
#media (aspect-ratio: 16/9) {
body {
flex-direction: row;
width: calc(8000vh/9);
height: 100vh;
transform: scaleX(.25);
transform-origin: top left;
}
}
<div class="screen">
<div class="list">
<div class="section">
<div class="title text">Subsection 1</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
<div class="section">
<div class="title text">Subsection 2</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
</div>
<div class="main"></div>
<div class="dynamic">
<div class="item">
<div class="name"><span class="text">Subsection 1</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
<div class="item">
<div class="name"><span class="text">Subsection 2</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
</div>
</div>
What is causing this, and is there a way to work around it, using HTML/CSS?
Let's say you had a website that was made with only mobile in mind, and you wanted to make it good to go for desktop, you wouldn't use transform scale, right? Simply don't use transform for that. Use media-queries and adjust the actual size of the elements accordingly. Using scale like that will mess with the pixel values and cause this blurry effect.
It doesn't matter how big or small the media you're working with is, the principles of responsive design work the same. Use relative units instead of absolute ones and it's not that hard.
If you use rem units for font-sizes, margins and paddings and etc, and unitless line-heights, they are relative to the root font-size (which is normally 16px by default), so by modifying the font-size on the html element, they will all scale in proportion. For general layout structure, you can use percentages, or even better, use CSS Grid and fr units.
Images will require a bit more work, as you should provably use different images for different sizes, but for everything else, this does it.
A demonstration:
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
Simple enough, right? The conversion to rem is basically the pixel value divided by 16 (the default root font-size). Now adding just a single line, we can scale everything:
html { font-size: 32px; } /* added just that, doubling the scale (16*2 = 32) */
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
Edit: Okay, I see it now - after the discussion on the comments. If your hardware is the one doing the scaling, and not the browser, I believe you are out of luck. But it should be possible to configure your monitors to extend one another horizontally instead, which would make it a proper 7680x1080 canvas that you could detect with a media-query for a 64:9 aspect ratio. Most OS will have that option (excluding things like windows starter). Ubuntu is a free option that have it out of the box, for example. I just assumed that's what you had, since it's usually the simplest way to go.
I found the reason to be related to OS anti-aliasing - since I believe you're not supposed to be able to change or force anti-aliasing on the fonts through the browser.
Since I'm on Windows, enabling ClearType smoothed out the text enough to be legible.
I'd like to use CSS Grid. Something like this I think…
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
position: relative;
}
Set the viewport with display: flex and height: 100vh and add to the last element
flex-grow: 1
.viewportDiv {
display: flex;
flex-direction: column;
height: 100vh;
}
.div1{
background-color: yellow;
height: 100px;
}
.remainingDiv{
background-color: red;
flex-grow: 1;
}
<div class="viewportDiv">
<div class="div1"></div>
<div class="remainingDiv"></div>
</div>
Using CSS Grid you need to wrap the top two elements and the remaining space and then apply display: grid to that.
In other words, your diagram actually was the solution.
The wrapper should have a height of 100vh…
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
background: pink;
display: grid;
grid-template-rows: 100vh auto auto;
position: relative;
}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr;
}
header {
background: green;
padding: .25em;
}
nav {
background: orangered;
padding: .25em;
}
main {
background: rebeccapurple;
}
footer {
background: yellow;
}
.subfooter {
background: blue;
}
<div class="wrapper">
<header>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
</header>
<nav>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</nav>
<main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>
You can do it using flex.
.a {
width: 100%;
height: auto;
}
.remaining {
width: 100%;
flex-grow: 1;
}
.holder {
display: flex;
flex-direction: column;
height: 100%;
}
html,
body {
height: 100%;
}
HTML code:
<div class="holder">
<div class="a">
Content here
</div>
<div class="a">
Content here
</div>
<div class="remaining">
Content here
</div>
</div>