« first day (2866 days earlier)      last day (922 days later) » 

6:28 AM
posted on March 05, 2021

New Cyanide and Happiness Comic

 
 
8 hours later…
2:15 PM
posted on March 05, 2021 by CommitStrip

 
 
3 hours later…
5:17 PM
@LlamaButt you'll need JavaScript for that
@Feeds lol
@LlamaButt see this article for starters css-tricks.com/…
 
6:20 PM
@TylerH
    .grid-wrapper {
    height: 100vh;
    border: 10px solid #14a76c;
    display: grid;
    grid-template-areas:
    "header header header"
    "main main main"
    "footer footer footer";
}

.item-1 {
    grid-area: header;
}
img.center {
    text-align: center;
}
<div class="grid-wrapper">
            <div class="grid-item item-1">
                <img class="center" src="/img/Small.png" alt="Logo" />
            </div>
Why will this image not horizontally align?
 
@BeerusDev are you using some library like bootstrap or something?
 
Nope
Just grid
 
and what are the dimensions of your image
 
129x40
Just showing the alt text as image, don't feel like putting the image online but there is what I am working with right now
 
Not sure, but I haven't messed with grid in years really
I would set the grid-item to display: flex probably to make it easier
 
6:29 PM
You prefer flexbox?
 
no, I mean use flex with grid
they're designed to work together
grid layout, grid items set to display: flex to control positioning or responsiveness
 
I thought layout-first as opposed to content first was going to be what I wanted to do for this landing page
 
because grid is not responsive
 
But it is backfiring
Well now that you have told me that, I will no longer be using it
 
@TemaniAfif poke
 
6:30 PM
I need responsiveness
 
Well, it's responsive in some ways
 
trying to practice with it so I can have a better understanding of it
 
but it's more designed for when you know what size your want your grid and your grid sections to be
 
Gotcha
 
This guide should help you if you have not read it before css-tricks.com/snippets/css/complete-guide-grid
 
6:31 PM
Want to make a landing page like so, I figured grid would be useful
 
important takeaway is to not be afraid to mix flexbox and grid
 
Have you ever used carousel?
 
7:13 PM
.flexbox-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
}

.flexbox-item {
    width: 100%;
    margin: 10px;
    border: 3px solid #333;
    background-color: #dfdfdf;
}

.flexbox-item-1 {
    min-height: 300px;
    width: 100%;
    flex-wrap: wrap;
    display: flex;
}
I have a h1 in .flexbox-item-1 and I am trying to center it but it will not center?
... text-align: center; doesnt work but setting a left and right margin of auto does. thats odd
 
@TylerH @BeerusDev text-align:center need to be applied to the image parent and not the image
and if you want to rely on margin:auto, you need to add display:block to the image
 
facepalm
can I have a <h1> element underneath a <img/> within the same flexbox-item-1 and have the image over the <h1> or do they need to be in different items
 
7:32 PM
change the direction by adding flex-direction:column
and when using flexbox, text-align:center no more apply, you need to center using the flexbox properties
 
I try to use align-items bc that is the cross-axis and it doesn't work
not even using float: and it centers them on the left and right
disregard that last statement, it was because I still had margin-left/margin-right set to auto. Still cant get them to stack vertically -.-
 
remove the margin:auto from them
and add flex-direction:column like I said above
 
I did
or to the item
oh the parent
I had it on the grandparent...
 
7:58 PM
@TemaniAfif if you can help me w one more thing that would be greatly appreciated
 
In my actual file the images are showing up bc they are local
but this one of the two soldiers, I am trying to have it be in the bottom left of the felxbox-item-2 so it looks like it is coming from under the below div, make it smaller aswell but not much
but when I try to alter the positioning of it nothing happens
 
@BeerusDev max-height:100% on the image?
 
Yes
Need it to be responsive
 
8:14 PM
can you show a screenshot of how you want it to look
 
See where the laptop screen is on the left
thats how I want the image of those two something like that
That way I can have text on the right
Should I make the 2nd flexbox item a row?
Its like no matter what I do to move the image. It doesn't budge
 
Wow. I was trying to make too many flex-box-items...
Thank you
 
yes, if you find yourself writing a lot of code then you are for sure doing it badly
CSS is simple ;)
 
It is taking forever to make sense
 
8:24 PM
you can continue you next row and you don't need a lot of code there too. one flexbox container and 3 divs inside
 
Sweet
if I wanted to blend the rows in together, would I just use a gradient and use the inverse for whichever one
So its like grey-white --> white-grey
 
yes you can do that
 
Does this CSS make sense to you Temani div > h1::after(br)
I would think it reads the child element of the div(h1) after <br/> tag do this to the text
 
not such CSS syntax doesn't exist
to select something after something else you use something + something_else
 
8:43 PM
Gotcha
I knew the after worked, wasn't sure if there was more syntax
 
9:14 PM
@TemaniAfif how would you go about creating a shadow behind an image?
I haven't tried yet but I was thinking:
Dupe the image so there are two in the same div, assign two different classes.
To the image that will be the shadow, change the z-index: -1, opacity 0.1and shift whichever direction you want?
 
yes but I would consider a blur filter instead of opacity
 
Blur the background "shadow" image?
actually don't answer it.
I need to do this on my own
ew, it placed the image under the other image making the page longer -.-
<div class="flexbox-container">
            <div>
                <img class="troopers" src="/img/troopers.png" alt="troopers"/>
                <img class="troopershadow" src="/img/troopers.png" alt="troopers"/>
            </div>
.flexbox-container > * {
    flex:1;
    min-width:0;
    margin:0 20px;
}
.troopers {
    max-width:100%;
}
.troopershadow {
    max-width: 100%;
    filter: blur(4px);
    z-index: -1;
    margin-left: 10px;
}
 
the new image need to be position:absolute to not take space
 
Ohhh
I did that then it moved it under the text on the right?
 
well, you need to also set the postion properties and so on ;)
 
9:23 PM
left: 0;
the z-index puts the image behind the flexbox container
No way its putting it behind the other image, even if it did it wouldn't matter as it is a png?
.troopers {
    max-width:100%;
}
/*.troopershadow {
    position: absolute;
    max-width: 100%;
    filter: blur(4px);
    left: 0;
    z-index: -1;
}*/
 
position:relative to the div containing the image
 
.tst{
    position: relative;
}
.troopers {
    max-width:100%;
}
.troopershadow {
    position: absolute;
    max-width: 100%;
    filter: blur(4px);
    left: 0;
    z-index: -1;
}
<div class="flexbox-container">
    <div class="tst">
        <img class="troopers" src="/img/troopers.png" alt="troopers"/>
        <img class="troopershadow" src="/img/troopers.png" alt="troopers"/>
    </div>
Noo bueno :(
 
remove the second image and try filter:drop-shadow(2px 2px 5px #000); on the first one. I think this is what you are looking for
 
perfect
 

« first day (2866 days earlier)      last day (922 days later) »