« first day (1666 days earlier)      last day (2122 days later) » 

6:24 AM
posted on November 21, 2017

New Cyanide and Happiness Comic

 
7:05 AM
Hi guys
how to created masonary grid usign flex method
 
Is there a website (or tool) which checks a website in some different screen sizes and different browsers? (I actually want to upload the beta version of my website and I need to check it before uploaing)
 
 
3 hours later…
9:45 AM
Hey, can someone help me with a small css snippet, which is not working?
 
 
7 hours later…
4:22 PM
I need help with box shadow
can anybody help me
I have box with inside other box
I want to show shadow of each box
I used the code from here https://paulund.co.uk/learn-css-box-shadow
but did't worked for me
 
4:45 PM
@EbîñRâykãr google
@Simon important lesson - don't click through stuff without reading it
@Shafizadeh any modern web browser has developer tools that can show you your page in responsive mode, you can resize the viewport at will
as for actual emulation, use browserstack.com
@dildo_beggins read the rules please
@ManojThakur same ^ read the rules
 
the room rules
top-right
 
Here is my problem jsfiddle.net/9nqcx28a
 
5:01 PM
you want one of the effects from that paulund site?
 
@TylerH I will remeber that and never do it again.
 
@ManojThakur jsfiddle.net/9nqcx28a/1 seems to work just fine to me
 
this inner red box not showing the shadow
you have used only one box
but I am trying to use box inside box
 
5:17 PM
did't worked
 
first things first: stop using inline styles
second - change one thing at a time and see how it affects your code
what you want as an end result is unclear
jsfiddle.net/9nqcx28a/4 following the code in the reference site works just fine
 
6:05 PM
posted on November 21, 2017 by CommitStrip

 
6:18 PM
Can anyone help me figure this out?

I'm trying to present a HTML/CSS style powerpoint-style slideshow, and for some reason whenever I load the page, the first slide is all jumbled up. Anyone know a fix for this possibly?

DEMO:
https://jsfiddle.net/eqeenn4v/1/
 
 
1 hour later…
7:27 PM
@sarangheh510 for starters you have invalid HTML
you are using the same ID multiple times
 
@TylerH I got it off here: https://webdesign.tutsplus.com/tutorials/create-a-powerpoint-like-presentation-using-pure-css3--cms-24508

Any alternate suggestions?
 
7:44 PM
well change the ids, obviously...
and running that codepen in my browser, it looks like even the one in the tutorial doesn't really work
 
@TylerH I tried switching it around, but it seemed to mess everything up really badly...
 
Yes, I'm afraid the demo used the same IDs
therefore it's not a good demo
luckily, this kind of thing has lots of hits on Google google.com/…
 
@TylerH Any idea why maybe my hover transition on .colorchange on slide #five might not be working
It seems to be working on jsfiddle but not in my regular browser, regardless of if I stick on -webkit- (chrome)
 
can you provide a minimal demo of the issue?
your previous jsfiddle didn't work at all
 
8:13 PM
https://jsfiddle.net/eqeenn4v/3/

You'd have to go through the slides to near the end in order, but otherwise I've specified the location on the HTML document and the CSS
 
@sarangheh510 it doesn't work fo rme
I just see everything in one slide
if I manage to find and click the 'next' button, I just see a blank blue background
 
https://jsfiddle.net/eqeenn4v/4/

Can you see the next and prev button at the bottom of the page in red circles now?
 
hi, i have built a custom slider, everything is working fine except that there is an extra space between each slide. (do select command to view that extra space). any fix?
 
@snow you want the red boxes touching?
 
@sarangheh510 so the issue is the animations don't work for me
doesn't matter how easy to see you make the buttons
I'm in Firefox 57
 
8:27 PM
@Alesana no... but you can remove the margin and see the issue i am talking about.. there should be a small white space between each red box
actually, yellow space
i want that space gont
gone
 
now I don't see anything out of the ordinary that shouldn't work out of the box in Firefox, so I'm guessing it's slightly off-spec CSS writing
 
alernatives you can do cmd+a or ctrl+a and the extra space will be highlighted
 
Which margin do you remove to do that? I don't know exactly what it is you want, maybe try sharing a snippet with the margins removed.
 
the whole Fiddle is pretty messy though, and not at all a minimal demo of what hovering slide 5 should look like
 
here, i have removed padding
you can find small spaces of yellow between each slide
 
8:31 PM
This is the HTML I have:

<div id="five" class="slide">
<div class="navigation"><a href="#eight" class="prev"></a><a href="#seven" class="next"></a></div>
<div class="content">
<h5>Example:</h5>
<div class="logo">
<div class="colorchange"><p>Color Change</p></div>
</div>
</div>
</div>

This is the CSS I have:
#five .colorchange{
background-color: #a2a2a2;
padding: 50px;
width: 50px;
height: 50px;
list-style-type: none;
border-radius: 50%;
z-index: 1;
position: absolute;
display: block;
left: 25%;
 
@snow this happens with inline block elements
 
solution?
 
It is putting 1 space between them
A simple hack is give the parent a font-size:0;
so the 1 space between them is not there
 
i tried with flex, its putting everything in view. doesnt behave like a slider
 
But, I would make them not be inline-block
 
8:34 PM
then what do i do to put them all in one line?
 
@sarangheh510 here is a minimal demo of your issue jsfiddle.net/eqeenn4v/5
 
Yeah disregard what I said last haha
You can just put the HTML in there without any space between the elements
But that is messy and isn't always an option
For example, if you don't have control over the HTML (are making a plugin or something)
 
yeah, i am using pug.. difficult to do away with whitespace
hmm.. giving a font-size of 0 seems to be the best option
do you use pug?
 
No I don't
 
@TylerH Works on the fiddle but not on my browser again :(
 
8:43 PM
i would like to know how to remove whitespace in the compiled html if its written in pug @TylerH any ideas?
 
I need to learn more template engines for muh resume
 
@sarangheh510 that v5 demo doesn't work in your browser? what browser are you using?
 
you should... you can pick up pug in under 30 minutes
 
Using multiple different elements separated by a comma in a CSS selector doesn't increase the specificity, does it?
For example .a {...} should be just as specific as .a, .b {...}, right? haha
 
right
 
8:48 PM
I took this little quiz thing online and it told me otherwise o.o
 
my whole life is a lie
or is it
 
Nah it's not true
I just tested haha
 
@Alesana correct. A comma stops the selector and starts a new one
.a, .b is two selectors
 
I thought so, it wouldn't make sense otherwise
 
you can increase the specificity by combining selectors like .a.b, which selects an element with both class .a and class .b
 
8:50 PM
@TylerH The demo works @TylerH with jsfiddle on chrome, but loading my actual html file on chrome, it doesn't work that way
 
then you have something else conflicting
or you're not loading it properly
 
Right I understand about specificity but just that when the website told me about the comma thing I didn't believe it haha
 
@Alesana you taking quizzes form w3schools?
 
what website was it
 
Hold on let me check I was taking a few of them last night
 
8:55 PM
@TylerH Does it have to do with the z-index maybe?
 
I can't seem to remember
@snow I actually did that as well haha :P. I wouldn't recommend
 
@sarangheh510 possibly. I can't really diagnose your issue since the demo doesn't work in firefox and I can't see your screen
 
@TylerH Thanks anyways @TylerH :D
 
@sarangheh510 I thought I would take a stab at it but I am confused on what the issue is.
 

« first day (1666 days earlier)      last day (2122 days later) »