These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Aug 2018
Morchid Chellali
@Morched23MJ
Aug 25 2018 00:03
I can submit a Github repo instead of a pen? In this case, I'm making a portfolio, and I want to seperate the CSS of each part, for a better maintenance. :P
Chris Cullen
@123xylem
Aug 25 2018 03:48
@123xylem
Hi guys.. I need to change a select dropdown arrows and replace it with 2 Icons instead. Any Idea how???
I know a lot of people use css background but that is when changing only 1 arrow
Chris Cullen
@123xylem
Aug 25 2018 04:02
So far I have this on my select and its working But I cant put a background color on the select input now
` height: 21px; width: 94%; background: url(assets/ArrowUp-Icon.svg),url(assets/ArrowDown-Icon.svg); background-position: top right,bottom right; padding-left: 0px; background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; /* background: #ECF0F9; */ padding-right: 5px;
Rahul Nayak
@pragyes31
Aug 25 2018 05:44
hi guys, I'm working on pomodoro clock. so I have 2 section. Both section has a + and - button and a number . Clicking + and - will add or subtract the number. How do I write code such that if I hit + from one section, it only add to the number present in that particular section?
Mandeep Sharma
@mandeephub
Aug 25 2018 06:05

Hello TO all

can any one help me with this
https://codepen.io/mandeep9362/pen/XPWqjd?editors=1100

i want to fix the nav but when im using position:fixed the white portion is getting disturbed

abraham anak agung
@padunk
Aug 25 2018 07:06
@mandeephub you can give 0px to the body margin. And if you want to comment css use /* code */
@pragyes31 use different ID on the section?
Mandeep Sharma
@mandeephub
Aug 25 2018 09:52
@padunk fixed thanks brother
Chris Cullen
@123xylem
Aug 25 2018 13:26
Hi guys.
I have an important Test Im completing right now. If anyone understands grid/flexbox and can help me please Pm!
Chris Cullen
@123xylem
Aug 25 2018 16:37
Does anyone know how to make a css grid with one column extending the height of the previous ones.
so you have this shape [] [] [] || Where the last box is taller than the row?
Javierguaregua
@Javierguaregua
Aug 25 2018 17:51
Uh
with grid-column-start: LINE;
grid-column-start: LINE;
grid-column-end: LINE;
asd
Chris Cullen
@123xylem
Aug 25 2018 17:52
Could this make the last column taller than the actual grid?
Javierguaregua
@Javierguaregua
Aug 25 2018 17:53
yup
I've tried it
Idk if there's another way to do it
Chris Cullen
@123xylem
Aug 25 2018 17:53
If theres anyway ill take it!
Javierguaregua
@Javierguaregua
Aug 25 2018 17:53

```<!DOCTYPE html>

<html>

<head>

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

.item3 {
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 20;
}
</style>
</head>

<body>

<h1>Grid Lines</h1>

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>

</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>
```

Chris Cullen
@123xylem
Aug 25 2018 17:53
Been at this for hours
Javierguaregua
@Javierguaregua
Aug 25 2018 17:53
lol
I found it on w3
Chris Cullen
@123xylem
Aug 25 2018 17:54
ok thanks looking at it now
@Javierguaregua thanks
@Javierguaregua but I need the last box to extend OUT of the grid
Chris Cullen
@123xylem
Aug 25 2018 17:55
because the grid has a background Image that needs to not be the bottom of the page
in your example the bg goes to the bottom
meaning for me the bg image would also go to the bottom
Javierguaregua
@Javierguaregua
Aug 25 2018 17:58
hm sorry I don't understand ?, you can change the values in grid-row-end
Chris Cullen
@123xylem
Aug 25 2018 18:00
so I could get the last big grid to stretch from inside the grid to outside
i want a box |XXX|
|XXX|
|__X|
X
where the last X has stretched out of the box to the bottom right
my diagram fkd up :/
Javierguaregua
@Javierguaregua
Aug 25 2018 18:03
|XXX|
|XXX|
|__X|
X
like that?
Chris Cullen
@123xylem
Aug 25 2018 18:03
Yea but with the X on the right - broken out of the box
xxx
xxx
x
xxx
xxx
--X
Moisés Man
@moigithub
Aug 25 2018 18:08
i dont understand.. u want the last X takes all the bottom area ?
Chris Cullen
@123xylem
Aug 25 2018 18:09
I want a grid ------------------------------------------- [ xxx ]
with the last col breaking through the bottom ---x
so that the grid background isnt holding the bottom of the last colum
https://ibb.co/iLffcp @moigithub As you can see the form colum needs to extend under the grid
but the background image of the grid must not be inline with the bottom of the form
Christos Kokolios
@KokoChris
Aug 25 2018 18:13
Hey everyone. I am launching a blog focused on helping people who want to transition the web development field. I would appreciate some feedback here https://christos21.typeform.com/to/PR7CFk. Thanks!
Moisés Man
@moigithub
Aug 25 2018 18:20

container <--- this have the background image
---- grid
--------grid elements * 6

the whole form is part of a grid element

Chris Cullen
@123xylem
Aug 25 2018 18:21
@moigithub yes
I need the form to break out of the container
with css grid or flexbox or something
Ive been at this for hours!
Moisés Man
@moigithub
Aug 25 2018 18:22
ur grid is used only for positioning
like this https://prnt.sc/kmthwx
purple = container
red = grid
green ur form
@123xylem
background image should NOT strech down, or need to be custom... with a white part on the bottom
Chris Cullen
@123xylem
Aug 25 2018 18:29
@moigithub Yes.. but the container has the bg Image in it
im trying to replicate that photo
Javierguaregua
@Javierguaregua
Aug 25 2018 18:30
background: no-repeat ; ?
maybe a max width ?
Moisés Man
@moigithub
Aug 25 2018 18:36
ur background image should be something like this https://prnt.sc/kmtkuk @123xylem
Chris Cullen
@123xylem
Aug 25 2018 18:46
yes
thats the image
@moigithub Im now trying to just put that background image in as an image... add the form in seperately with position absolite
Javierguaregua
@Javierguaregua
Aug 25 2018 19:08
have you done it yet?
Chris Cullen
@123xylem
Aug 25 2018 19:22
no
well kind of
it looks ok at 100%
Chris Cullen
@123xylem
Aug 25 2018 20:25
Can someone tell me why my media query isnt working?
@media (max-width: 400px) {
  .nav_logo_container {
    display: block;
    font-size:0.4em;
  }
}

.nav_logo_container{
    margin:0.8% 20% 1.6% 20%;
    display:flex;
    justify-content: space-between;
}

.nav_logo_container img{
    flex-grow:0;
}
My media query isnt triggering until the page is at 200px
Aditya
@ezioda004
Aug 25 2018 20:31
@123xylem Do you have any other media queries?
Chris Cullen
@123xylem
Aug 25 2018 20:31
I worked it out.. I was at 90% zoom :/
Aditya
@ezioda004
Aug 25 2018 20:32
Oh yeah, I once had that bug, wasted a lot of time
Javierguaregua
@Javierguaregua
Aug 25 2018 21:08
Jajajaja
Chris Cullen
@123xylem
Aug 25 2018 21:41
function showMenu() {
  document.querySelector("nav").css({"display":"block"});
}
Any idea how to make this work?
onclick show the nav
Aditya
@ezioda004
Aug 25 2018 21:50
@123xylem .style.display = "block";
You're mixing jQuery with JS ;)
Chris Cullen
@123xylem
Aug 25 2018 21:51
@ezioda004 thanks
yea.. now i want an if statement to keep it working
lol
Aditya
@ezioda004
Aug 25 2018 21:52
You want a toggling behavior?
Probably wanna make a .hide class and have the property display: none;, simply toggle this class.