Responsive Cards Using CSS Grids

  Рет қаралды 70,539

Coding Artist

Coding Artist

Күн бұрын

Пікірлер: 43
@searrell
@searrell 3 ай бұрын
How do I add this to an already existing set of Web pages with its own body already set up? As when I add this in to the site I'm messing around with and making, it breaks everything and everything gets blacked out other than the cards on the site
@norvusordoseclorum
@norvusordoseclorum Жыл бұрын
Thank you so much for making this video it's excellent quality. I'm just wondering how do I stop the images from going very wide and too tall?
@amur619
@amur619 5 ай бұрын
play with the width and height
@studprogaming4948
@studprogaming4948 3 жыл бұрын
without media tag how is this responsive? 😕
@CodingArtist
@CodingArtist 3 жыл бұрын
With Grid Layout. No media queries required here.
@studprogaming4948
@studprogaming4948 3 жыл бұрын
@@CodingArtist ok thanks 😊
@hogvarts
@hogvarts 3 жыл бұрын
Cool ! Tell me what font is used in vs code ?) Thanks !!!
@CodingArtist
@CodingArtist 3 жыл бұрын
It's Poppins.
@hogvarts
@hogvarts 3 жыл бұрын
@@CodingArtist Thank you so much ! I tried it, but it's a pity that the small indentation between dots and other symbols (
@loss2570
@loss2570 2 жыл бұрын
what should I do if the images and cards are all different sizes?
@lex8699
@lex8699 2 жыл бұрын
put the img inside of a figure, and add some width an height to figure and the img put it 100%
@romeno29
@romeno29 3 жыл бұрын
My cards don't go to horizontal when page is full screen, any sugestions?
@CodingArtist
@CodingArtist 3 жыл бұрын
It's hard to say without checking the code. However you can download the source code (link in video description) and compare with your code. Or else you can mail me the code so I can check.
@polylyfeee5869
@polylyfeee5869 3 жыл бұрын
the css file is nothing but a link to the web
@ptilu2195
@ptilu2195 2 жыл бұрын
I don't find the source code on your website
@CodingArtist
@CodingArtist 2 жыл бұрын
Use the search button on the website and enter the video name.
@KyselPoints
@KyselPoints 2 ай бұрын
So you would die adding a voiceover in the video, right?
@lovnyweb7482
@lovnyweb7482 4 жыл бұрын
thank you for your videos 🙏 thanks to you I created my first youtube channel in html and css only 😀.
@Ben-gz5ev
@Ben-gz5ev 3 жыл бұрын
I like your channel, very good
@klaasjanssen644
@klaasjanssen644 2 жыл бұрын
thx for this tutorial
@CodingArtist
@CodingArtist 2 жыл бұрын
Welcome 😊
@gungde_2169
@gungde_2169 3 жыл бұрын
My image wont fit with width: 100%, how can i fix it?
@aayushdhakal6755
@aayushdhakal6755 2 жыл бұрын
same problem... any solution for that?
@Michel2003g
@Michel2003g 2 жыл бұрын
set it min-width instead of just width this will force it to 100%
@cagatayakar1282
@cagatayakar1282 4 жыл бұрын
i have a question. Lets say you want to put the last card in the middle. How can you do it ?
@rybalchenkofamily
@rybalchenkofamily 2 жыл бұрын
change the html order would be the easiest way.
@dann2758
@dann2758 2 жыл бұрын
Thank you so much
@kodeeshwarar3016
@kodeeshwarar3016 4 жыл бұрын
Your video content very nice bro
@vaishnavraj8703
@vaishnavraj8703 3 жыл бұрын
cant find the source code !!!
@CodingArtist
@CodingArtist 3 жыл бұрын
You have to serach using the search bar on website.
@LouisaWamvs8457
@LouisaWamvs8457 4 жыл бұрын
Thanks for helping in web blog project.🧡💛💚💙💜❤🤗
@100XPercentX
@100XPercentX 4 жыл бұрын
How do you control the vertical spacing
@CodingArtist
@CodingArtist 3 жыл бұрын
With grid-gap or grid-gap-row
@kevinvigi.mathew6350
@kevinvigi.mathew6350 3 жыл бұрын
Epic help,tysm
@dhruvgupta5658
@dhruvgupta5658 3 жыл бұрын
Source code ? There's only a website that leads to a youtube channel
@CodingArtist
@CodingArtist 3 жыл бұрын
Link in video description
@dhruvgupta5658
@dhruvgupta5658 3 жыл бұрын
@@CodingArtist ik dude , but the problem is it just lead to your youtube
@CodingArtist
@CodingArtist 3 жыл бұрын
Scroll down. There is a button called 'Download code'.
@dhruvgupta5658
@dhruvgupta5658 3 жыл бұрын
@@CodingArtist okay I found it , btw I need a help , how can I make the image round
@CodingArtist
@CodingArtist 3 жыл бұрын
@@dhruvgupta5658 Try this: .container{ clip-path: circle(50% at 50% 50%); }
@MeigetsuHiisOka
@MeigetsuHiisOka 4 жыл бұрын
nice !
@anshulrj
@anshulrj 4 жыл бұрын
Maybe Last
@lucaspiputto
@lucaspiputto 4 жыл бұрын
First
Responsive Food Menu Without Media Queries | Responsive CSS Grid
14:36
Sigma Kid Mistake #funny #sigma
00:17
CRAZY GREAPA
Рет қаралды 19 МЛН
黑天使只对C罗有感觉#short #angel #clown
00:39
Super Beauty team
Рет қаралды 24 МЛН
Lazy days…
00:24
Anwar Jibawi
Рет қаралды 8 МЛН
Мама у нас строгая
00:20
VAVAN
Рет қаралды 12 МЛН
Learn CSS Grid the easy way
37:04
Kevin Powell
Рет қаралды 936 М.
Responsive Cards Using CSS Grid | HTML & CSS Tutorial
10:10
Learn Web
Рет қаралды 7 М.
Responsive Product Cards design with HTML and CSS
19:28
Web Master
Рет қаралды 190 М.
Animated Card Hover Effect | Html & CSS | CodeEra
6:29
Haveri ka Krishna
Рет қаралды 251 М.
CSS Card Hover Effects | HTML & CSS
15:26
Bedimcode
Рет қаралды 112 М.
Learn CSS Subgrid in 14 minutes
14:19
Slaying The Dragon
Рет қаралды 89 М.
CSS Card with hover animation and mobile fallback
49:12
Kevin Powell
Рет қаралды 471 М.
Responsive CSS Grid Tutorial
17:14
Angela Design
Рет қаралды 848 М.
CSS Grid Crash Course
53:45
Traversy Media
Рет қаралды 327 М.
Sigma Kid Mistake #funny #sigma
00:17
CRAZY GREAPA
Рет қаралды 19 МЛН