FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Tom

@moT01

something like that - adding !important makes it have the most value I think - so it's a good way to test if your properties are getting overridden by other properties

Daniel Feldman

@Feldbot

@moT01 I think I am still confused with some of the basics of css selector specificity. I thought by writing div#strict_indicator, I was just targeting one selector with an ID applied to it. How/when does it become two selectors? How do you check the value?

@moT01 I guess I was also under the impression that in writing my CSS it was good to use compound selectors by way of legible semantics, that one could more clearly see what the selection applied to that general, shorter selectors.

Tom

@moT01

im not sure if there's a way to check the value on the fly, but you could look it up - you used two selectors to target one element

im not sure what best practices are - i dont usually use more than one selector unless I need to

cause you could have put like 6 on there

body>div>div>div>div#strict_indicator

Daniel Feldman

@Feldbot

@Tom I think the !important addition is what is making it work, it doesn't seem to matter if it is preceded by div or not.

Tom

@moT01

yes, like I said - adding that makes it have the most value possible I think

I do know its not something you want to be using all over the place though

as it can complicate things - but in this case it's not a bad spot to use it

so yea, you can fix it by adding that or the other way (removing div)

Daniel Feldman

@Feldbot

@Tom That is a good point about all the potential selectors I could have! I'd like to write it without !important, I always see how that is bad style and can cause conflicts. I'm not sure how to write this without it or how to make the specificity higher. I did try reordering in the css and it didn't seem to matter. If I remove div and !important both it doesn't work.

Tom

@moT01

change it to a class instead of id

i think id's take over classes

Daniel Feldman

@Feldbot

@Tom Bingo! That has a lower value

Tom

@moT01

:+1:

Daniel Feldman

@Feldbot

@Tom That is something else I find somewhat confusing about css basics. I thought if I was using something only once it was good to have an ID on it so it would have higher specificity, so I do that a lot, but I'm wondering if it isn't a better practice to just have classes for everything, and just use an ID similar to when you want something to be !important (and just used once).

@moT01 Thanks a bunch for the help, much appreciated!

Tom

@moT01

ive heard it's bad practice or something to use ids but I dont see a problem with it - but I would still probly use class most of the time

Daniel Feldman

@Feldbot

@moT01 And you think better to write the css selectors sparingly too, by using the bare minimum selector? Here is an example I'm curious about... You have a button element with a class of green. In the css is it better to write .green only? For reading comprehension it seems like it is better to say button.green so I can see what it applies to quickly. But what I hear you saying is that it's then two selectors that then have a higher assigned specificity value. And you'd only use compound selectors because you need to target something very specifically, with higher specificity?

Tom

@moT01

i think .green is just a bad name in this case - I always prefer readability - I would maybe name it .btn_green or something

Daniel Feldman

@Feldbot

@moT01 Pure gold. That makes a lot of sense. Thanks!

Tom

@moT01

sure thing

Daniel Feldman

@Feldbot

@sansae If you change your <img id="logo0"> tag to <div id="logo0"> that displays the image. Somehow you were getting two image tags nested with one closing tag.

Ryan Williams

@Ryanwfile

I'm trying to order 6 blocks in 2 columns so that at higher viewports the blocks appear such as
row 1 : block 1 block 2
row 2: block 3 block 4
row 3: block 5 block 6

and on smaller viewports there would be only 1 column with blocks in ascending order 1 - 6.
I'm using flexbox but not sure how to do this without editing the html, here is the codepen, https://codepen.io/Ryanwfile/pen/qKQdwY
any help is appreciated. Thank you.

Alex

@abrta

Hi, new here. I don't know if anyone here uses codeanywhere but I prefer that over codepen. Anyway, everything worked fine before but now I started codeanywhere up again and no changes to the CSS file are applied to the HTML any longer. Does anyone have any idea why? :/

Stephen Peters

@stephepush

lol, I’m at wits end with this project for the night, and I want to figure out why it’s width is wider than the screen. I imagine it involves something I did wrong with CSS grid:
https://robust-hoverfly.glitch.me/

dinesh

@1532j0004kg

@stephepush make use of class container-fluid

Deepak Gowda

@Deep2322_twitter

i have an array of objects, as soon i assign it a variable. It changes the order. I am not able to figure out.Can anyone help me ?

Abraham Anak Agung

@AbrahamAnakAgung

@Deep2322_twitter what you mean changes order?

Sirani McNeill

@mcne65

https://forum.freecodecamp.org/t/portfolio-build-a-survey-form/204556

hrbudding

@hrbudding

Have anyone here used framework 7 before and do you know how to setup admob in Cordova apps

Norvin Burrus

@ndburrus

@mandeephub this may be helpful :sparkles:

Daniel Feldman

@Feldbot

I'm trying to retrieve the value on a button on click with jQuery by using this. When I select $(this) it returns what looks to be an array-like object, and index 0 apparently holds all the properties I'm trying to get at. When I try to access with $(this[0]), it instead appears to return the prototype which is not what I want. Does anyone know how to access the button properties using this?

Kent Saeteurn

@sansae

Thank you so much for helping me @Feldbot, although I don't understand why this worked previously, but not now. As I mentioned in my original message, I completed this challenge a while ago, and at the time, when I submitted my work, everything was working. It was not until I checked on this project a week ago that I noticed the image was no longer displaying.

Also, I ended up using span instead of div as it worked for me better. Thank you again @Feldbot

Daniel Feldman

@Feldbot

@sansae I don't understand quite what was happening either, but glad I could help find a solution!

Kent Saeteurn

@sansae

@Feldbot, I took a look at your fiddle, and I was able to access the button properties using this. Maybe this is what you were looking for? https://jsfiddle.net/2of5euky/20/

Daniel Feldman

@Feldbot

@sansae Yes, that works and is a good solution, thanks. The way I was doing it returned an object that has one index at 0 with tons of properties on it, and I was wondering how to access those.

Kent Saeteurn

@sansae

@Feldbot If you wanted to use $, then the following should work as well: $(this)[0]
Maybe someone can chime in and correct me if I'm wrong, but my understanding is that $(this)[0] == this. If you try this in the console, you'll see that both give you the same results:

<button id="btn_test" value="hi">TEST</button>

Thanks again for the help @Feldbot. Happy coding

Daniel Feldman

@Feldbot

@sansae That's what I was looking for! I had $(this[0]) instead of $(this)[0]. I couldn't for the life of me figure out why I couldn't access. Hee heee. Thanks Kent! Happy coding to you too :-)

Barbara Pentoney

@flyfishingbarbara

hi peeps...need help with a website...adigitalconcept.com. on my phone the gray background 1/2 the width and i want it to be full width...it's using parallax... any suggestions...thnx

alpox

@alpox

@flyfishingbarbara It already has full width for me - on mobile (android) and desktop (small width)

Barbara Pentoney

@flyfishingbarbara

@alpox thanx for feedback...on my iphone it's wonky...

hensn5250

@hensn5250

@flyfishingbarbara should the grey background fill/cover the viewport?

Barbara Pentoney

@flyfishingbarbara

@alpox ...see the button with text "architec research consult".... the button is not responsive... any solutions...

@hensn5250 yes

alpox

@alpox

@flyfishingbarbara

    white-space: nowrap;

This prevents the button from wrapping the text on small screen

You may want to remove this property - or use media queries to only remove it on certain screen sizes

Where communities thrive

People

Repo info

Activity