I am ALMOST done with my first project ever and I am applying media queries but I can't see them working completely. I would appreciate some help. Maybe my code for the grid is wrong...
PROBLEM:
The grid-items won't align in 4 columns (media query for min-width 1024px). They will remain in one or two columns according to the code for mobile and media query for ipad screen.
<section class="grid-container">
<div class= "grid-item one">
<h5>ARTICLE</h5>
<a href="#">
<img src="img/chocolate.png" alt= "Chocolate image">
</a>
<h3>Explore the world of chocolate</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Labore eos in deserunt architecto, accusantium quia eaque iste delectus id reiciendis inventore amet possimus!
Culpa deleniti nulla dolorem, voluptas minima sapiente. </p>
</div>
-----HERE ITEM 2 to 4, I JUMP to the ITEM 5----
<div class= "grid-item five">
<h5>TIPS</h5>
<a href="#">
<img src="img/foodmarket.jpg" alt= "Foodmarket image">
</a>
<h3>Best foodmarkets you have to visit</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Labore eos in deserunt architecto, accusantium quia eaque iste delectus id reiciendis inventore amet possimus!
Culpa deleniti nulla dolorem, voluptas minima sapiente.
</p>
</div>
<div class= "grid-item six">
<h5>RECIPE</h5>
<a href="#">
<img src="img/recetamole.png" alt= "Mole dish image">
</a>
<h3>How to make mole from scratch</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Labore eos in deserunt architecto, accusantium quia eaque iste delectus id reiciendis inventore amet possimus!
Culpa deleniti nulla dolorem, voluptas minima sapiente.
</p>
</div>
</section>
**/**** MEDIA QUERIES IN CSS ****/**
#media (min-width: 768px) {
header {
justify-content: space-between;
}
nav {
display: inline-block;
align-items: flex-end;
font-family: 'Roboto', sans-serif;
font-size: 20px;
justify-content: space-around;
padding: 0 20px;
}
h1 {
font-size: 42px
}
p {
font-size: 32px;
}
img {
width: 100%;
}
.one, .two {
grid-column: span 2;
}
.three, .four {
grid-column: span 2;
}
.five, .six, {
grid-column: span 2;
}
.seven, .eight {
grid-column: span 2;
}
}
#media (min-width: 1024) {
.flex-parent {
flex-direction: row;
justify-items: flex-end;
}
.flex-child {
width: 100%;
}
.one, .two, .three, .four {
grid-column: span 1;
}
.five, .six, .seven, .eight {
grid-column: span 1;
}
}
#media (min-width: 1024px) {
.flex-parent {
flex-direction: row;
justify-items: flex-end;
}
.flex-child {
width: 100%;
}
.one, .two, .three, .four {
grid-column: span 1;
}
.five, six, seven, eight {
grid-column: span 1;
}
}
I think you haven't mention the pixel #media (min-width: 1024px)
Add this header part as well as
<meta content="width=device-width, initial-scale=1" name="viewport" />
Make sure you defined <meta name="viewport" content="width=device-width, initial-scale=1.0">
And you can even write a full content to be more accurate:
#media only screen and (min-width: 768px){
/*Your changes go here*/
}
Remember to put a space bewteen and and (
Related
I'm trying to replicate a website that claimed it was only made with the basic Html, CSS and JavaScript. Annoyingly I can't seem to make the images responsive and relatively the same
Can someone explain to me what I’m doing wrong? I'm using flexbox to make the site responsive but the alignments are off and I cant get them to sit next to each other with all the correct padding as well
This is my work:
https://codepen.io/Hitmonchan98/pen/PoQLRPy
This is what I want my site to look like:
https://i.stack.imgur.com/jsdxo.jpg
//html
<body>
<div class="main">
<div class="main-img"><img class="firstImage"src="https://www.amazingonly.com/wp-content/uploads/2013/04/images4-1728x1080.jpg" alt=""></div>
<div class="text">
<h2>Discover innovative ways to decorate</h2>
<p class="para">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia repudiandae dolore iure laudantium fugiat fuga sunt unde voluptates et, quasi exercitationem eum consectetur. Doloremque, ab?</p>
<div class="shop">Shop Now</div>
</div>
</div>
<div class="lower">
<div class="dark image">
<img class="dark-img" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="">
</div>
<div class="text2">
<h3>About furniture</h3><p class="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus ipsa, adipisci perspiciatis debitis magni sed possimus pariatur qui exercitationem fugiat iusto error ducimus, quos quis, eius earum tempore quibusdam laboriosam!</p></p></div>
<div class="light image">
<img class="light-img"src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="">
</div>
</div>
</body>
//css
body{
margin: 0;
padding: 0;
line-height: 2rem;
}
/*Body*/
.firstImage,.light-img,.dark-img
{
width: 100%;
}
.text2{
padding: 2rem;
}
.text h2
{
font-size:3rem;
}
#media screen and (min-width: 768px) {
.main{
display: flex;
}
.text{
padding: 1rem 3rem 3.5rem 3rem;
}
.lower{
display: flex;
align-content:center;
}
.text2{
padding:0;
width: 40%;
}
.dark, .light
{
width: 30%;
}
.dark-img, .light-img {
width: 100%;
}
}
#media screen and (min-width: 786px) {
}
Add display: block; to your img elements and this should get rid of the white spacing underneath them. Images are weird in HTML since they have properties of both display inline and block, and I usually set them to block to have maximum styling control over them.
i've been trying to make the text div to take the entire width of the grid layout but have it's content in line with the rest of the layout itself
I've used width: 100vw, tried padding the corners yet it doesn't work properly and is a bit clunky.
I've uploaded it to the codepen for better understanding
https://codepen.io/Aegtar/pen/PoObBdG
what is needed is that the green part will take the entire width yet the text inside will stay within the lightsalmon div.
the HTML :
<div class='main-layout'>
<div class='weather-page'>
<div class='top-side'>
<div>WeatherPage</div>
<div class='text-container'>
<div class='ha'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat expedita molestiae nisi dolorum est,
tempore dolore! Itaque quidem nobis deleniti! Lorem ipsum dolor sit amet.
</div>
</div>
<button>
2
</button>
<button>
2
</button>
</div>
</div>
</div>
<section class='footer'>Footer</section>
</div>
the scss :
.main-layout {
display: grid;
grid-template-columns: minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr);
> * {
grid-column: 2;
}
> *.full {
grid-column: 1 / -1;
}
}
.home-page {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 50%;
justify-content: center;
align-items: center;
gap: 40px;
}
.weather-page {
gap: 10px;
grid-auto-flow: column;
background-color: lightsalmon;
.top-side {
gap: 20px;
align-items: center;
flex-direction: column;
display: flex;
margin-bottom: 30px;
.text-container {
background-color: lightgreen;
.ha {
text-align: center;
}
}
}
.footer {
background-color: rgb(25, 118, 210);
}
any help is appreciated!
Just remove the grid-template-columns:minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr);
from the .main-layout and then add
body{
padding:0;
margin:0;
}
so that it can strech all the way.
Also, if you want the grid-template-columns , then comment on this post and I will (probably) find another solution.
Code Pen: https://codepen.io/576031/pen/rNYWqbz
It seems like you're not really using your grid. You're creating 2 empty columns on the sides for styling and putting all the content in the center column. Why not use the default layout with a simple container and recreate what you want just by using the basic stylings with width, margin and padding.
* { margin: 0 auto; }
.width-90 { width: 90%; }
.width-100 { width: 100%; }
article {
text-align: center;
max-width: 1300px;
border: solid 1px black;
}
article > * { padding: 10px 0 30px 0; }
article header, article section { background-color: lightsalmon; }
article main { background-color: lightgreen; }
article footer { background-color: lightblue; }
/*SCSS was not supported in this snippet but you could remove the word article in the lines above and then just place them in article if you want it to be specific with SCSS*/
<div class='main-layout'>
<article class='weather-page'>
<header class="header width-90">
<h2>WeatherPage</h2>
</header>
<main class='main width-100'>
<p class="width-90"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat expedita molestiae nisi dolorum est, tempore dolore! Itaque quidem nobis deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, at. Atque alias modi nam provident quam, consectetur unde sunt exercitationem corrupti veritatis ea, itaque sint vero voluptatibus in fugit delectus recusandae eos enim deleniti doloribus magni. Repudiandae obcaecati blanditiis temporibus, vitae numquam illum ducimus voluptates sed in repellat quis esse! Cupiditate facilis magni velit molestias iure enim optio ratione. Ad? </p>
</main>
<section class="section-buttons width-90">
<p><button>2</button></p>
<p><button>2</button></p>
</section>
<footer class='footer width-100'>
<p class="width-90">Footer</p>
</footer>
</article>
</div>
If you really want to keep your html structure the way it is then you could probably use a variable since you're working with SCSS. You could try this for example:
$grid-sides: 10px;
.main-layout {
display: grid;
grid-template-columns: minmax($grid-sides, 1fr) minmax(auto, 1300px) minmax($grid-sides, 1fr);
/* ... everything else ...*/
}
/* at the right place in your SCSS*/
.text-container {
margin-left: -$grid-sides;
margin-right: -$grid-sides;
padding-left: $grid-sides;
padding-right: $grid-sides;
background-color: lightgreen;
/* ... everything else ...*/
}
I have a text and an image overlapping it. What code can I write that makes the image go below the text when A media query is fired. I tried making that text a block element so that the image goes below but nothing happened.
I also tried making the container's flex-direction column but that didn't made any change too
Here's the code
<!DOCTYPE html>
<html lang="en" class="html">
<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">
<title>Shivansh</title>
<style>
* {
margin: 0px;
}
html {
scroll-behavior: smooth;
}
/* width */
.homeimgandtextcont {
display: flex;
flex-wrap: wrap;
}
.homeimg {
width: 799.557px;
height: 640px;
position: relative;
left: 50%;
}
.homeheading {
width: 100px;
height: 67px;
position: relative;
top: 16rem;
color: black;
font-family: 'serif';
font-size: 52px;
margin-left: 19px;
}
.hometext {
position: relative;
top: -320px;
color: black;
font-family: 'serif';
margin-left: 24px;
}
</style>
</head>
<body>
<section class="sectionhome" id="sectionhome">
<div class="homecont">
<div class="homeimgandtextcont">
<h1 class="homeheading">
Sample
</h1>
<img class="homeimg" src="https://expo8.netlify.app/logoo.png" alt="Image">
<p class="hometext">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
</p>
</div>
</div>
</section>
</body>
</html>
Your CSS is a a bit confusing. Stuff like top: -320px; should not exist in a ' good written ' css. If you need to do stuff like that you might need to rethink the HTML structure.
Anyway. The easiest way to change the positions of elements is with flexbox.
You can wrap your text and img in a div and for desktop use display:flex; flex-direction:row and in your media query you can use flex-direction:column . So the image will be after( below ) the text.
Check sample below or jsfiddle and adjust it to your specific needs
div {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
img, p {
flex: 0 0 50%;
}
#media only screen and (max-width:320px) {
div {
flex-direction: column;
}
img,p {
flex: 0 0 100%
}
}
<div class="homeimgandtextcont">
<p class="hometext">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
</p>
<img class="homeimg" src="https://via.placeholder.com/150" alt="Image" />
</div>
i need a solution guys, i want the two boxes in pink and white to have same height as its parent container in blue box (that is to stop where that blue box stopped) without depending on the content of the div in pink and white boxes.
here is my fiddle code
https://jsfiddle.net/dcq4bufa/3/
my HTML CODE
<head>
<title>eco</title>
</head>
<body>
<header class="header">
<ul class="nav">
<li class="nav-items">HOME</li>
<li class="nav-items">APP</li>
<li class="nav-items">STORE</li>
</ul>
<div class="home">
<div class="home__right">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nemo
aliquid saepe tempora doloribus dicta quas aperiam, eius odio ipsa culpa ipsam rerum quam vero
itaque, recusandae sint perferendis ipsum.</p>
<h1 class="home__right--sub"> tenetur quidem ducimus quod odit totam, dolor</h1>
</div>
<home class="home__left">
<h1 class="paragraph">Lorem ipsum dolor sit amet, consectetur ad</h1>
</home>
</div>
</header>
</body>
First you must outline the height of the parent container(blue),then set the two children elements(pink and white)height of 100% since they are in a container that is 100 of your device height.Try this:
.home {
display: flex;
height:100vh;
&__right {
background-color: pink;
height:100%;
flex-basis: 50;
}
&__left {
background-color: white;
height:100%;
flex: 1;
}
}
You can adjust the height of .home if you are not comfortable with the overflow
If you can use flexbox, you may do the following:
.header {
height: 80vh;
background-color: blue;
/* Add flexbox */
display: flex;
flex-direction: column;
}
.home {
display: flex;
flex: 1; /* Set flex-grow: 1 */
...
I'm picking up website building after a long vacation (~5 years). CSS standards have changed, and I'm still trying to catch up.
Anyway, I'm still very strict on the quality of my html and will not compromise on that for layouting.
Here's my HTML. It can't change, except for the image-right and image-left classes. Those can be replaced by class="right" or class="left" on the corresponding images.
<div class="text-block image-left">
<h2>A block of text with image on the left</h2>
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<p>
This is one paragraph.
</p>
<p>
This is the second paragraph.
</p>
</div>
<div class="text-block image-right">
<h2>A block of text with image on the right</h2>
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<p>
This is one paragraph.
</p>
<p>
This is the second paragraph.
</p>
</div>
The HTML above reflects how I want it to display on a mobile browser: one column with header, image, and then text.
However, on a desktop browser, I want to make it look like this (well, roughly anyway):
What's the appropriate CSS to achieve that layout without altering the HTML, and having a responsive layout?
CSS Grid is awesome, but for this your best bet would be to use Flexbox and it would be good for accessibility to use some semantic HTML5 too.
For your HTML:
<figure class="image-left">
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<figcaption>
<h2>A block of text with image on the left</h2>
<p>This is one paragraph.</p>
<p>This is the second paragraph.</p>
</figcaption>
</figure>
<figure class="image-right">
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<figcaption>
<h2>A block of text with image on the right</h2>
<p>This is one paragraph.</p>
<p>This is the second paragraph.</p>
</figcaption>
</figure>
And for your CSS:
/* Add styling here you wish to add for screens with a width less than 600px */
#media screen and (min-width: 600px) {
/* Add styling here you wish to add for screens with a width of 600px and wider */
figure {
display: flex;
}
figcaption {
width: 100%;
}
.image-left {
flex-direction: row-reverse;
}
.image-right {
/* This is set to flex-direction: row; by default so doesn't need to be added */
}
}
Any problems or need extra help feel free to comment below :)
Here is a way to do it with grid.I only modified the html by adding a class mobile in your text-block divs to get equal specificity for the #media rules (and avoid duplicate CSS).
/* here I define a 4x3 grid */
/* rows are set to auto so the ones not used will collapse */
div.text-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows : repeat(4, auto); }
/* here I tell the h2 for .image-left to start a col2 and use 2 columns */
/* each column is 1fr, so 2 columns is 2/3 of the available space */
div.text-block.image-left h2 {
grid-column: 2 / span 2;
}
/* I don't need to position each "p" on rows, just tell them which
column to go to */
/* no need to put them in a div */
div.text-block.image-right p {
grid-column: 1 / span 2; }
/* I use this code to make your image resize automatically,
but there is plenty of choice to make it look the way you want.
You can also check out the "object-fit" property */
div.text-block.image-left img {
display: block;
height: auto;
max-height: 100%;
max-width: 100%; }
/* for the #media rules I needed a .mobile class to have the same specificity
as the first rule (edit : though removing ".text-block" for "p" and "h2"
declarations would have the same effect) */
/* also needed to re-use "justify-self" on images
as it has priority over justify-items */
#media screen and (max-width: 900px) {
/* all blocks */
div.text-block.mobile h2 {
grid-column: 1 / span 3;
}
You can play with grid-template-columns, grid-template-rows to find the "right" proportions for what you need (for example : grid-template-rows: .2fr repeat(2, 1fr) auto;).
If you have questions, I'll be happy to answer them (or try to at least) ;)
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
img,
p,
h2,
div {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
div.text-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
/*grid-template-rows: .2fr repeat(2, 1fr) auto;*/
align-items: start;
justify-items: left;
}
/* first block */
div.text-block.image-left h2 {
grid-column: 2 / span 2;
}
div.text-block.image-left p {
grid-column: 2 / span 2;
width: 100%;
}
div.text-block.image-left img {
display: block;
height: auto;
max-width: 100%;
grid-column: 1 / span 1;
grid-row: 1 / span 3;
}
/* 2nd block */
div.text-block.image-right h2 {
grid-column: 1 / span 2;
}
div.text-block.image-right p {
grid-column: 1 / span 2;
width: 100%;
}
div.text-block.image-right img {
display: block;
height: auto;
max-width: 100%;
grid-column: 3 / span 1;
grid-row: 1 / span 3;
justify-self: right;
}
/* just to show what's going on */
h2 {
background: blue;
}
p {
padding: 5px;
border: white 1px solid;
background: black;
color: white;
}
div.text-block {
background: white;
border: 2px solid green;
}
/* media query */
#media screen and (max-width: 900px) {
/* all blocks */
div.text-block {
justify-items: center;
}
div.text-block.mobile h2,
div.text-block.mobile p {
grid-column: 1 / span 3;
}
div.text-block.mobile img {
grid-column: 1 / span 3;
grid-row: 2 / span 1;
justify-self: center;
}
}
<div class="text-block mobile image-left">
<h2>A block of text with image on the left</h2>
<img src="https://picsum.photos/600/400" alt="A nice picture" />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat quas eius, ab corporis architecto quam? Soluta, reprehenderit eveniet porro fugiat ratione voluptatum harum ea fuga facilis ad incidunt cumque maiores. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Eos libero illo repellat sint in culpa itaque est modi, eum officia a laborum iure alias cupiditate tenetur, cumque dolorem deleniti? Eum!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi amet quaerat facere maiores sequi velit totam praesentium adipisci provident aspernatur at commodi, nostrum voluptates esse reiciendis optio rem et impedit!Eveniet ipsa delectus voluptate suscipit
possimus totam qui iusto consectetur sapiente maiores culpa alias, unde enim laudantium libero, consequatur explicabo adipisci non! Non quis optio fugiat, ullam dolorem iure debitis?
</p>
</div>
<div class="text-block mobile image-right">
<h2>A block of text with image on the right</h2>
<img src="https://picsum.photos/600/400" alt="A nice picture" />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat quas eius, ab corporis architecto quam? Soluta, reprehenderit eveniet porro fugiat ratione voluptatum harum ea fuga facilis ad incidunt cumque maiores. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Eos libero illo repellat sint in culpa itaque est modi, eum officia a laborum iure alias cupiditate tenetur, cumque dolorem deleniti? Eum!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi amet quaerat facere maiores sequi velit totam praesentium adipisci provident aspernatur at commodi, nostrum voluptates esse reiciendis optio rem et impedit!Eveniet ipsa delectus voluptate suscipit
possimus totam qui iusto consectetur sapiente maiores culpa alias, unde enim laudantium libero, consequatur explicabo adipisci non! Non quis optio fugiat, ullam dolorem iure debitis?
</p>
</div>
Edit :
grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
This is a way to create rows automaticaly if you want to add paragraph and not change the template.
But there are 2 drawbacks :
A height which do not adjust to the content must be defined (not auto, max-content ...etc)
For now I don't know how to make the image "span" all the "not collapsed rows" automatically. So you will need to increment the span for 'grid-row: 1 / span 3;' for the image each time you add a 'p'