I would like my 3 columns to be responsive on mobile devices and I have trouble doing it. What do I add to it, or how do I make it work? :) I know it might be a silly question, but I am supper beginner, trying to learn. Thank you
This is the code im using:
<ul style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 310px;">
<li>
<p>aaa</p>
</li>
<li>
<p>bbb</p>
</li>
<li>
<p>ccc</p>
</li>
<li>
<p>ddd</p>
</li>
<li>
<p>eee</p>
</li>
<li>
<p>fff</p>
</li>
<li>
<p>ggg</p>
</li>
<li>
<p>hhh</p>
</li>
<li>
<p>iii</p>
</li>
</ul>
hint From your comment
#G-Cyrillus I dont have a preference, but probably one if I had to choose :) Either way is fine
You could use column-width instead column-count and eventually clamp() sizing it :
li {border:1px solid;margin-bottom:2px}
<ul style=" column-width: clamp(310px, 30vw, 800px); ">
<li>
<p>aaa</p>
</li>
<li>
<p>bbb</p>
</li>
<li>
<p>ccc</p>
</li>
<li>
<p>ddd</p>
</li>
<li>
<p>eee</p>
</li>
<li>
<p>fff</p>
</li>
<li>
<p>ggg</p>
</li>
<li>
<p>hhh</p>
</li>
<li>
<p>iii</p>
</li>
</ul>
About clamp() , see : https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
About column-width see : https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
You can use grid, it is imao more clear solution:
<div style="display: grid; grid-template-rows: 3; grid-template-columns: 3">
<p>Skvělé produkty</p>
<p>Rychlé doručení</p>
<p>Ochotu</p>
<p style="grid-row: 2">Přívětivé ceny</p>
<p style="grid-row: 2">Výhodné dopravné</p>
<p style="grid-row: 2">Spolehlivost</p>
<p style="grid-row: 3">Bleskovou expedici</p>
<p style="grid-row: 3">Férový obchod</p>
<p style="grid-row: 3">Bezodkladnou reklamaci</p>
</div>
Edit: Examples from chat:
<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">
<li>Skvělé produkty</li>
<li>Rychlé doručení</li>
<li>Ochotu</li>
<li style="grid-row: 2">Skvělé produkty 2</li>
<li style="grid-row: 2">Rychlé doručení 2</li>
<li style="grid-row: 2">Ochotu 2</li>
</div>
<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Skvělé produkty</p>
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Rychlé doručení</p>
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Ochotu</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Přívětivé ceny</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Výhodné dopravné</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Spolehlivost</p>
</div>
The are some ways to make a responsive web design. But i think using css #media is easy to use
#media only screen and (max-width: 768px) {
.left,
.right {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Media responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left,
.right {
height: 400px;
}
.left {
background: blue;
float: left;
width: 60%;
}
.right {
background: red;
float: right;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
</body>
</html>
As you see above, I create 2 elements float 2 sides. But when using small screen (<768px) you will see it turn into 1 line
You can read more here: W3 Responsive Web
Something keeps in mind:
Consider use rem, vh,vw, em instead of px because it like % and suitable to responsive
Always add meta viewport
Related
I'm not sure if these are empty cells, most likely they are stretched because of the largest element, please tell me how I can remove these indentations without javascript. I tried to use grid-auto-flow: colunm, but it doesn't works.
picture with problem
what i'm trying to do
<nav class="header__submenu" id="header__submenu-resources" data-opened="1">
<ul class="header__submenu-list" id="header__submenu-list-resources">
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Webinars
<p class="header__submenu-description">Get to know Tines and our use cases, live and on-demand.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Blog
<p class="header__submenu-description">Read articles by team members, from company updates to tutorials.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Prodcast
<p class="header__submenu-description">Listen to the latest episodes of our podcast, 'The Future of Security Operations.'</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Customers stories
<p class="header__submenu-description">Learn how the world’s best security teams automate their work.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Story library
<p class="header__submenu-description">Discover helpful example Stories, connect them to your own tools and start customizing instantly.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Docs
<p class="header__submenu-description">Get to know the features and concepts of Tines, in detail.</p>
</a>
</li>
<li class="header__submenu-item" id="header__submenu-item-block">
<a href="#" class="header__submenu-link">
<div class="submenu-block">
<div class="submenu-block__top">
<img src="images/tines-icon-galaxy-gate-150w.png" alt="" class="submenu-block__top-image" />
</div>
<div class="submenu-block__text">
<div class="submenu-block__top-text">
<h3 class="submenu-block__title">Tines</h3>
<span class="submenu-block__mark">Hub</span>
</div>
<p class="submenu-block__description">Learn how to automate your workflows, troubleshoot any issues, or get help from our support team.</p>
</div>
</div>
</a>
</li>
</ul>
</nav>
CSS:
.header__submenu-list {
margin: 0;
padding: 40px 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 30px;
background-color: var(--color-light);
width: auto;
border-radius: 0 0 28px 28px;
}
#header__submenu-list-resources {
grid-template-columns: repeat(3, 1fr);
}
.header__submenu-item {
padding: 0 20px 0 20px;
align-self: flex-start;
}
#header__submenu-item-block {
grid-column: 4 / 5;
grid-row: 1 / 2;
align-items: flex-start;
/* grid-area: block; */
}
The whole code won't fit here, please see the codepen
is this what you want ?
I updated the following code to make it work
#header__submenu-item-block {
grid-column: 4;
grid-row: 1 / 3;
}
check below the working sample.
https://codepen.io/shahilparichay/pen/LYdpJGX
learn about Grid from Here
I'm struggling to display two div elements correctly right next to each other and I'm not sure what would be the best way to go about this.
Here you can see what it looks like live
And this would be the code:
This is the first element shown in the picture, the second div has this exact same code, only the text/image changes.
<main class="page"><h1>Downloads</h1>
<div class="album1">
<div class="image">
<img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
And this is what I have for CSS for both main div elements, both are called album1 and album2. The actual text has its own div that applies to both elements.
.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}
.album2
{
display: flex;
float: right;
align-items:flex-start;
padding-bottom: 85px;
}
Your help would greatly be appreciated cause this is for my final and the professor isn't any help :(
If you need additional info I will happily provide it, sorry I'm still getting the hang of this.
From what I understand, you want to display the albums side by side.
To achieve that you can place both the albums in a parent container (Example: classname = albums) and give it a display:flex.
Also you can use justify-content: space-between; to place it in two ends. float: right; is not required.
.albums {
display: flex;
justify-content: space-between;
}
.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}
.album2
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
}
<main class="page"><h1>Downloads</h1>
<div class="albums">
<div class="album1">
<div class="image">
ASDASD
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
<div class="album1">
<div class="image">
ASDASD
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
</div>
You can create a parent div for both div album1 and album2,
then make it display:flex , so album1 and album2 will align next to each other.
.albumgroup { display:flex; }
.album1 { //your css here}
.album2 { //your css here}
<!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">
<title>Document</title>
</head>
<body>
<div class="albumgroup">
<div class="album1">
<div class="image">
<img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
</div>
<div class="text">
<h2>Led Zeppelin III</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
<div class="album2">
<div class="image">
<img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album2">
</div>
<div class="text">
<h2>Led Zeppelin IV</h2>
<ol>
<li>Immigrant Song</li>
<li>Friends</li>
<li>Celebration Day</li>
<li>Since I've been Loving You</li>
<li>Out on the Tiles</li>
<li>Gallows Pole</li>
<li>Tangerine</li>
<li>That's the Way</li>
<li>Bron-Y-Aur Stomp</li>
<li>Hats Off to Roy Harper</li>
</ol>
</div>
</div>
</div>
</body>
</html>
I will provide you a pretty simple example on how to do this:
index.html
<!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">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="album1">
<h1>Album1</h1>
</div>
<div class="album2">
<h1>Album2</h1>
</div>
</div>
</body>
</html>
styles.css:
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
height: 100vh;
}
.album1 {
background-color: aquamarine;
width: 50vw;
}
.album2 {
background-color: blueviolet;
width: 50vw;
}
ANd the result will be like this:
Then, inside your album1 and album2, put everything you want.
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to make products catalog with React and CSS. Everything seems to be okay except last row of products.
The last row has only 1 element and since the flex-grow: 1 is set, it takes up all the available width.
Is it possible to set the same width for all elements in the row?
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.products__product {
flex: 1 0 20%;
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
background:grey;
}
<div class="products">
<div class="container">
<div class="products__content">
<ul>
<a class="products__product" href="/products/21/stone-in-the-night"
><li><h1>Stone in the Night</h1></li></a
><a class="products__product" href="/products/21/the-dying-of-the-spirits"
><li><h1>The Dying of the Spirits</h1></li></a
><a class="products__product" href="/products/21/the-beginnings-guardian"
><li><h1>The Beginning’s Guardian</h1></li></a
><a class="products__product" href="/products/21/death-of-light"
><li><h1>Death of Light</h1></li></a
><a class="products__product" href="/products/21/the-lost-soul"
><li><h1>The Lost Soul</h1></li></a
><a class="products__product" href="/products/21/first-husband"
><li><h1>First Husband</h1></li></a
><a class="products__product" href="/products/21/verzliaraktis"
><li><h1>Veržliaraktis</h1></li></a
><a class="products__product" href="/products/21/raktas"
><li><h1>Raktas</h1></li></a
>
</ul>
</div>
</div>
</div>
You can always set the initial width to a percentage:
.products__product {
...
flex: 0 0 20%
...
}
The above says, do not shrink nor grow the items, but set it to 20% of the width of the container. So even if you have a single element in the container, it will only occupy 20%. You can adjust based on the number of elements you have. Unfortunately, you can't use fractional notation.
You could just set the width of the products__product class if you want to keep them uniform.
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
.products__product {
width: 30%; // 3 per row
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
}
}
How about this?
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.products__product {
flex: 0 0 20%;
min-width: 20%;
margin: 1.5em 0.75em 0 0.75em;
min-height: 250px;
background: red;
}
<div class="products">
<div class="container">
<div class="products__content">
<ul>
<a class="products__product" href="/products/21/stone-in-the-night">
<li>
<h1>Stone in the Night</h1>
</li>
</a>
<a class="products__product" href="/products/21/the-dying-of-the-spirits">
<li>
<h1>The Dying of the Spirits</h1>
</li>
</a>
<a class="products__product" href="/products/21/the-beginnings-guardian">
<li>
<h1>The Beginning’s Guardian</h1>
</li>
</a>
<a class="products__product" href="/products/21/death-of-light">
<li>
<h1>Death of Light</h1>
</li>
</a>
<a class="products__product" href="/products/21/the-lost-soul">
<li>
<h1>The Lost Soul</h1>
</li>
</a>
<a class="products__product" href="/products/21/first-husband">
<li>
<h1>First Husband</h1>
</li>
</a>
<a class="products__product" href="/products/21/verzliaraktis">
<li>
<h1>Veržliaraktis</h1>
</li>
</a>
<a class="products__product" href="/products/21/raktas">
<li>
<h1>Raktas</h1>
</li>
</a>
</ul>
</div>
</div>
</div>
So I'm creating a website and have run into a little problem in relation to lists. I'm aiming to make a specific image within the list slightly bigger as it appears smaller in relation to the others.
Here's an image for reference: https://imgur.com/9cyt4Gz
In order to stack the 3 images on top and below, I have created two separate lists for the three at the top and the three at the bottom. This is where I believe the issue lies.
I have tried to use the following css code to solve the issue (note I have used 2px to make the outcome obvious)
.white-container ul li:nth-child(3) img {
width: 2px;
}
This gives the following result: https://imgur.com/C0jC6uY
The HTML code is here:
<div class="white-container">
<div class="container">
<div>
<ul class="firstthree">
<li>
<img src="images/brush.svg" class="brush" alt="brush">
<p class="brush">Graphic Design</p>
</li>
<li>
<img src="images/wand.svg" class="wand" alt="wand">
<p class="wand">UI Design</p>
</li>
<li>
<img src="images/code.svg" class="code" alt="code">
<p class="code">Front-end Dev</p>
</li>
</ul>
</div>
<div>
<ul class="secondthree">
<li>
<img src="images/settings.svg" class="settings" alt="settings">
<p class="settings">Back-end Dev</p>
</li>
<li>
<img src="images/database.svg" class="database" alt="databases">
<p class = "database">Databases</p>
</li>
<li>
<img src="images/mobile.svg" class="mobile" alt="mobile">
<p class="mobile">Mobile Devices</p>
</li>
</ul>
</div>
</div>
</div>
Obviously I do not want the bottom right image to change. I am at a loss of what else to try. I have tried using
.white-container ul firstthree li:nth-child(3) img {
which i thought would work but to no avail. Any help would be appreciated. Thanks!
The first step will be to merge your two lists into one, because semantically they should be.
<ul>
<li>
<img src="images/brush.svg" alt="brush">
<p>Graphic Design</p>
</li>
<li>
<img src="images/wand.svg" alt="wand">
<p>UI Design</p>
</li>
<li>
<img src="images/code.svg" alt="code">
<p>Front-end Dev</p>
</li>
<li>
<img src="images/settings.svg" alt="settings">
<p>Back-end Dev</p>
</li>
<li>
<img src="images/database.svg" alt="databases">
<p>Databases</p>
</li>
<li>
<img src="images/mobile.svg" alt="mobile">
<p>Mobile Devices</p>
</li>
</ul>
And then tell the browser to display the list as a grid.
ul {
display: grid;
list-style: none;
grid-template-columns: repeat(3, 1fr);
}
Then you can use flex inside each cell to arrange the items vertically (ul > li { display: flex; flex-direction: column; }). I'll leave the rest to you.
I'm trying to create a footer kind of like this one here
Right now the issue I'm having is getting the content to sit beside eachother instead of stacked on top of eachother.
I've tried using display:flex but that moves everything, including text I want to stay in place, and that isn't the result I'm aiming for, so I'm not sure what to try next.
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.pleft {
width: 20%;
color: rgba(255, 255, 255, 0.74);
}
<div class="footer">
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
<hr>
</div>
If anyone can help me figure this out, it'd be greatly appreciated.
used display:flex
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
display: flex;
}
.pleft {
/* width: 20%; */
color: rgba(255, 255, 255, 0.74);
}
.footer div {
width: 33.333%}
<div class="footer">
<div>
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
</div>
<div>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
</div>
<div>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
</div>
<hr>
</div>