So, i decided to use scroll snapping in the website i am creating, but for some reason, even after following 5/6 tutorials on youtube, none of them worked for me, i tried to add scroll snapping to each home div but that didn't work, so i changed 3 or 4 times this code, tried putting the snap type in container, in body, but none of that worked. (that's not the full css code, but only the important ones)
If anyone can help, i would appreciate.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
html {
scroll-snap-type: y mandatory;
overflow-y: auto;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
.home-1 {
height: 100vh;
width: 100%;
background-color: #DBDBDB;
display: flex;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="home-1">
<div class="menu">
<p>Menu</p>
</div>
<div class="top-links">
About Me
Works
</div>
<div class="right-buttons">
<li onclick="toggleLanguage('English')">En</li>
<li onclick="toggleLanguage('Portuguese')">Pt</li>
</div>
<div class="logo-holder">
<div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
</div>
<div class="bottom-links">
Instagram
Behance
</div>
<div class="email">
<p>alo#scarrard.co</p>
</div>
</div>
<div class="home-2">
</div>
<div class="home-3">
<div class="row">
<div class="column">
<h1>My name is <br>
Sabrina Carrard,<br>
I’m a graphic designer <br>
and passionate <br>
about creating <br>
things and animals. <br>
</h1>
<hr class="solid">
<p>Before we say goodbye, you can get in <br>
touch through my email in Portuguese, <br>
English and French (I’m learning that, <br>
so please, be kind). <br>
</p>
</div>
<div class="column-2">
<p>My formal education was in UTFPR,
where I graduated in graphic design
as well. I started to work still I was in
college, and worked with brands like
ONU, Abril, Red Balloon, Wise up,
Porcelanosa, Medianeira, SEBRAE,
Prata e Arte, Bel Pesce, Universidade
do Intercâmbio e Casa Paraíso
Ecológico. Today I like to consider
myself as a brand and editorial
designer, things I really enjoy
while I’m working on.
</p>
<p>I started to care about art when
I was in school. At the time, I was
obsessed with movies and used to
watch four or five movies a day (but
I was a fine student, I swear). After
that I fell in love with art in
my college days, especially art
history. Today I’m very interested
in the discussion between gender
and art. Female artists, what they
did and their stories, really caught me.
</p>
</div>
<div class="column-3">
<p>
Besides animals, other thing that
is really important to know is that
I’m fascinated by books and
literature. I truly believed that
literature opened my eyes to
important questions such as
human rights and feminism.
So when I’m reading something,
usually they are novels related
to these subjects because it
is something that I care about
</p>
</div>
</div>
</div>
<div class="home-4">
</div>
<div class="home-5">
</div>
<div class="home-6">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
</figure>
<figure class="gallery__item gallery__item--5 ">
<img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
</figure>
</div>
</div>
<div class="home-7">
</div>
<div class="home-8">
</div>
<div class="home-9">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
</figure>
</div>
</div>
<div class="home-10">
</div>
</div>
</body>
</html>
Problem
The following CSS ruleset is wrong:
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
There's no class="body" in the HTML.
The selector only targets .home-10. When you list more than one tag, class, etc., how each part is delimited is very important:
Selector
Target
Declaration
.A {space} .B
.B
Target each .B that is a descendant of an .A
.A , .B
.A OR .B
Target all .A and all .B
.A > .B
.B
Target each .B that is a direct descendant (child) of an .A
.A + .B
.B
Target each .B that is the very next sibling of an .A
.A ~ .B
.B
Target each .B that is a sibling that proceeds an .A
.A.B
.A AND .B
Target all tags that have class="A B"
So if your intention was to target each of those classes, you need to delimit them with a comma:
.home-1, .home-2, .home-3, .home-4, .home-5, .home-6, .home-7, .home-8, .home-9, .home-10 {
scroll-snap-align: start;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght#300&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font: 2ch/1.25 Oswald;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: auto;
}
body {
background: #DBDBDB;
}
h1,
h2,
h3,
h4,
legend,
.byline,
.title {
font-family: Montserrat;
}
.byline {
font-style: italic;
}
header,
section,
footer {
padding: 10px 12px;
background: #DBDBDB;
scroll-snap-align: start;
}
header {
margin: 0 0 20px 0;
border-bottom: 3px inset grey;
}
section {
min-height: 100vh;
}
footer {
margin: 20px 0 0 0;
border-top: 3px inset grey;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
menu {
display: flex;
justify-content: space-around;
width: max-content;
list-style: none;
margin-left: 0;
}
.left,
.right {
display: flex;
align-items: center;
}
li {
margin: 0 5px
}
p {
margin-bottom: 5px;
}
.logo {
max-width: 3rem;
}
.logo img {
display: block;
object-fit: contain;
max-width: 3rem;
}
h1 {
margin-bottom: 10px
}
h2 {
margin-bottom: 5px
}
article {
padding: 5px 8px 8px;
flex: 1;
}
article:first-of-type {
flex: 0.5;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin: 10px;
}
.title {
margin-bottom: 0;
}
.gallery {
scroll-snap-align: none;
}
.gallery figure {
align-self: center;
margin: 10px;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/main.css" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>Sabrina Carrard</h1>
<nav>
<div class='left'>
<p class='title'>Menu</p>
<menu>
<li>About Me</li>
<li>Works</li>
</menu>
</div>
<div class='right'>
<menu>
<li><a href="#" class='en lang'>En</a></li>
<li><a href='#' class='pt lang'>Pt</a></li>
</menu>
<figure class="logo">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"></figure>
</div>
</nav>
</header>
<main>
<section class='page'>
<div class="row">
<article class='column'>
<h2>My name is <br>Sabrina Carrard, </h2>
<p class='byline'>I’m a graphic designer and passionate about creating things and animals.</p>
</article>
<article class="column">
<p>My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce,
Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.</p>
<p>I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art
history.
</p>
</article>
<article class="column">
<p>Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.</p>
<p>Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something,
usually they are novels related to these subjects because it is something that I care about.</p>
</article>
</div>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/people?w=320&h=180&random=1&txt=1&txtclr=fc0' alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=2&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=3&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=4&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/people?w=160&h=90&random=1&txt=5&txtclr=fc0" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/things?w=480&h=270&random=1&txt=6&txtclr=fc0' alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=480&h=270&random=1&txt=7&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=720&h=405&random=1&txt=8&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=320&h=160&random=1&txt=10&txtclr=fc0
" alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=11&txtclr=fc0
" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
</main>
<footer>
<p>Before we say goodbye, you can get in touch through my <a href='emailto:alo#scarrard.co'>email</a> in Portuguese, English, and French (I’m learning that, so please, be kind).</p>
<address>
Street<br/>
City, Province/State<br/>
Phone
</address>
</footer>
<script>
/*Always put script right before the </body> end tag*/
</script>
</body>
</html>
Related
For whatever reason I can't figure this simple thing out. I've 3 divs that I want to stack when shrinking the browser using flexbox, however I must be missing something. Any insight would be appreciated. I merely want to just make these responsive & have actually done this before but maybe I am going crazy :).
.container {
position: relative;
display: grid;
justify-content: center;
align-items: center;
flex-direction: row;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: grid;
flex-direction: row;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>
Use grid-template-columns: repeat(auto-fill, 150px); to have a CSS grid layout that automatically adapts to the viewport size without needing to hardcode #media rules.
For example:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
gap: 1em;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>
Below I will add my HTML and CSS code. I want to give my page a 2 column layout within the main section. Any help is much appreciated. The navigation, footer, and title part will be the same on each page. I just need the two-column on the main section.
HTML
<!DOCTYPE html>
<head>
<title>Augie's Custom T-shirts</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Shop</p>
</div>
<div class="menu">
<p>Events</p>
</div>
<div class="menu">
<p>Contact Us</p>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">Augie's Custom T-shirts</span></h1>
<h2>Custom T-shirts for you or your party.</h2>
<div class="bulletPoints">
<ul>
<li>Birthday parties</li>
<li>Vacation groups</li>
<li>Bachelorette Parties</li>
<li>Family reunions</li>
<li>Work team rewards</li>
<li>Business promotions</li>
</ul>
</div>
<br/>
</div>
<p id="Catch">
Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
</p>
<p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
<p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
<div class="row">
<div class="column">
<img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
</div>
<div class="column">
<img src="images/pink.jpg" alt="Pink" style="width:100%">
</div>
<div class="column">
<img src="images/skull.jpg" alt="Skull" style="width:100%">
</div>
</div>
<p><strong>How it works:</strong></p>
<p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
<figure>
<img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
<figcaption>Choose from are variety of t-shirt colors!</figcaption>
</figure>
<p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
<p>Please note there will be a one time $15 charge for any custom graphics design.</p>
<h2><em>Contact us today!</em></h2>
</main>
<footer class="footer">
<div class="box">
<p>Augie's Custom T-shirts</p>
<p>(478) 555-1212</p>
<p>augieB#augiesTees.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for updates!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>100 Tanger Dr, Locust Grove, GA</p>
<p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
</div>
</footer>
<div class="copyright">
<h3> #copyright: Landon Byrd</h3>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</body>
CSS
/*
Landon Byrd
Fall 2021
Plain Red #f60d41
Rich Red #f6130d
Orioles Orange #f64d0d
Sunset Orange #f6870d
Golden Yellow #f6c10d
*/
/* Global settings */
h1 {text-align: center; font-family: Papyrus}
h2 {text-align: center; color: #f6130d; text-decoration: underline}
.wrapper{width:85%; margin:0 auto; max-width: 960px;}
/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #f6130d; text-align: center;}
.menu{float:left; width: 25% }
/* Main section */
.banner{justify-content: center; background-color: #f6c10d; text-align: center;}
.bulletPoints ul {
display:inline-block;
text-align:left;
}
section{background-color: #f6870d; color: #f60d41; font-style:italic; margin: 25px 50px 75px;}
body {
background-image: url("images/background.jpeg");
}
.image1
{
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
/* Footer section */
* {box-sizing: border-box;}
.footer{text-align: center; background-color: #f6130d; color: #f6c10d; }
.box{float:left; width: 33.33% }
.footer::after {content: ""; clear:both; }
/* Copyright section */
.copyright {text-align: center; background-color: #f6130d; color: #f6c10d; }
I would also like to make sure all my floats are cleared as nessicary.
It's very easy with flex.
In 2021 you should try to avoid floats as much as possible.
Simply switch to flex as described here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As for your specific case:
.flex-container{
display:flex;
width:100%;
}
.col{
max-width:50%;
flex: 0 0 50%;
}
<div class="flex-container">
<div class="col">
col 1
</div>
<div class="col">
col 2
</div>
</div>
If you want to make them go vertically on mobile, just give the container the property flex-direction:column and make the 2 divs max-width:100% and flex:0 0 100%;
I'm trying to get my photos to be aligned vertically with my other photos. They always appear under the last one I've added in HTML. I have looked around but can't seem to find it.
CSS:
h1 {
text-align: center;
font-size: 50px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
h2 {
text-align: center;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
nav {
text-align: center;
font-size: 20;
}
.frontIMG {
height: 30%;
width: 30%;
border: black solid medium;
}
img {
max-width: 100%;
height: auto;
}
.frontIMGcenter {
display: block;
margin: 500px 250px;
height: 30%;
width: 30%;
border: black solid medium;
}
HTML:
<DOCTYPE html>
<html>
<head>
<link href="mainpage.css" type="text/css" rel="stylesheet">
<title> Barton And Son Builders </title>
</head>
<body>
<nav>
<a href=./MainPage.html> Home </a>
About Us
<a href=./Portfolio.html> Portfolio </a>
</nav>
<main>
<section>
<h1>
Barton And Son Builders
</h1>
<h2> <em> "Foundation To Finish" </em> </h2>
</section>
<figure class= "mainIMG">
<div id= "#crystalcomplete">
<img src= "/C:\Users\Ed\Desktop\Photo-Mainpage\The-Crystal-Restaurant\CrystalComplete.jpg" class= "frontIMG">
</div>
<br>
<figcaption class= "figcapMain"> The Crystal Restaurant <br>
Public Square, Watertown NY. </figcaption>
</figure>
<figure class= "mainIMG">
<img src= "/C:\Users\Ed\Desktop\Photo-Mainpage\Black-River\black-river.jpg" class= "frontIMG">
<br>
<figcaption class= "figcapmain"> Metal Roof <br>
Black River, NY.
</figcaption>
</figure>
<figure class= "mainIMG">
<img src= "/C:\Users\Ed\Desktop\Photo-Mainpage\Spokes-Deck\Spokes-deck.jpg" class= "frontIMGcenter">
<br>
<figcaption>Spokes Pressure Treated Deck <br>
Public Square, Watertown NY. </figcaption>
</figure>
</body>
</main>
</html>
</DOCTYPE>
There seems to be a </div> in the middle of the first figure. Try taking that out and see what happens.
Generally your code should render them all aligned to the left.
Are you editing your code in an editor or just notepad? A rule of thumb is to keep track of open- and close-tags, they can cause mayhem ;) Best of luck!
I'm trying to include an image above text, however it affects the text if I resize that image. Whatever I try to do, either it losses responsiveness or moves text under the screen (I have one page 'body' with hidden overflow). I managed to move an image to the center of the screen both in height and width without it affecting the text below, but changing it's width makes it non responsive and moves other elements. Any help?
In short: I want that image above the text, bigger, responsive and not affecting the text.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
why you don't use Bootstrap instead of CSS3? Like this for example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Sample</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59c4f5655bafe82c692a7052/gato-marron_0.jpg" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://dam.ngenespanol.com/wp-content/uploads/2019/02/gatos-caja-2.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
Because you are giving position absolute to .pagr_foto. And you didn't mention any css for image. By default image tag won't respect any other elements. So you have to mention style by your own.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.pagr_foto_img{
width: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I have a grid layout. I'm trying to apply an image to the box on the left. It only fills 3 quarters of the box and leaves space at the bottom. Is there any way I can get the image to fill the entire div and be responsive as it should. I initially wanted to add a slideshow which was the same problem. Also, my other issue is the 4 smaller boxes. The text falls outside of the boxes when making the screen smaller. Hoping someone has positive feedback for me :)
I tried to extend the height of the image but obviously distorts the image
<!-- run local host
1) cd and drag drop file
2) type: python -m SimpleHTTPServer 8080
3) browser type: http://localhost8080
-->
<!-- to make a comment: cmd and / -->
<!-- to shift a section cmd + ] on mac or CTRL + ] on wondows -->
.grid {
display: grid;
grid-template-columns: 6fr 2fr 2fr;
grid-template-rows: 200px 200px 400px;
grid-gap: 20px;
grid-template-areas:
"one two three"
"one four five"
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
}
.grid > article img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
.text > h3 > {
text-align: center;
}
<!-- wrapper start -->
<!-- header start -->
<div class="wrapper">
<div class="header">
<!-- nav bar -->
<ul class="nav-container">
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Contact</li>
<li>Login</li>
</ul>
<!-- nav bar -->
<header id="top" class="top-image">
<h1 style="color: white">Code To Program</h1>
<p style="color: white">Web Design | SEO | Tutorials</p>
Contact Us
</header>
</div>
<!-- header finish -->
<!-- header 2 start -->
<div class="header-2">
<h2 style="color: lightslategrey; font-size: 3rem; text-align: center">Our Services</h2>
</div>
<!-- header 2 finish -->
</style>
<div class="container">
<main class="grid">
<article class="one" style="height: 420px">
<img class="imgs" src="img/pdx.jpg">
</article>
<article class="two">
<div class="text">
<h3>2 Web Design</h3>
<figure>
<img src="img/seo.png" alt="Smiley face" height="72" width="72">
</figure>
</div>
</article>
<article class="three">
<div class="text">
<h3>3 SEO</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Read more</button>
</div>
</article>
</br>
<article class="four">
<div class="text">
<h3>4 Blog</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Just do it...</button>
</div>
</article>
<article class="five">
<div class="text">
<h3>Tutoring</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Here's why</button>
</div>
</article>
</main>
</div>
Back to top »
<script src="accordian.js"></script>
<footer style="background-color: brown">
<p>This is the footer</p>
<p>© 2019 Desmond Dallas</p>
</footer>
You are looking for object-fit.
This will solve your problem:
.grid > article img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}