Krutagna Patel• 390
@krutagna10
Submitted
Till how many pixels should I make the website responsive?
FalejevV
@FalejevV
All comments
- FalejevV• 500
@FalejevV
Posted
Hi. Most phones have screen size 320px and more, so i guess 320px is enough. Although I do up to 300px, just to be sure it'll work 100% on every screen :)
Marked as helpful
0 - Billy• 40
@DavincyProject
Submitted
can someone explain to me how to replace images with css or whatever u know, from desktop images to mobile images
FalejevV• 500@FalejevV
Posted
There is an element in html called <picture>.
Inside tag you can specify multiple screen sizes and images to show. Im bad at explaining, so you better google about it. If you dont want to use multiple div's and css, <picture> is your solution.
Marked as helpful
1 - Eric Kobliska• 90
@kob112358
Submitted
This was a fun project. I'm curious to look through other projects and see how they 1)validated 2)positioned the front/back of the card
Thanks!
FalejevV• 500@FalejevV
Posted
Hi Eric, nice job! :) I have 1 small tip to improve your form.
Inputs have attr. maxlength (e.g.)
<input type="text" maxlength="2"/>that limits input length to current number. You can use it for month,year,cvc and card number.Marked as helpful
0 @astijusk101
Submitted
Everything was easy to implement, apart from one thing. When shrinking the window size, the buttons do not line up vertically, as the length of the paragraphs above each button is not equal. So when there is a line break in one of the paragraphs, the button in that section shifts downwards. Does anyone know how to solve this?
FalejevV• 500@FalejevV
Posted
Hi Astijus, one of the ways to solve this problem is to make your section class a flexbox element by adding this lines to it. This will convert your section into a column that has more control.
.section{ display:flex; flex-direction:column; }Then you add
flex:auto;to paragraph, so it will take all the remaining space and push button down. (also remove position:fixed from button)This way, paragraph can be any size, it will still push button to bottom of block.
0@Ismat27
Submitted
I need to work on the color of text. I observed that the color changes from its top to bottom. Any idea to accomplish this will be appreciated.
FalejevV• 500@FalejevV
Posted
Hi! I can tell you how i did it. So i took this bottom part of block (.b class in your project) which looks brighter and made it not "exact" color, but white. Added opacity to it so it will look simmilar to original, and moved it using z-index on top of text.
Because of the opacity of this block, text also becomes whiter on bottom part.
0- Aman Dagne• 120
@Amandagne
Submitted
- How to know font sizes?
- How to identify if an element has a box-shadow of with very low opacity?
- How to know the exact spaces between different elements of the same parent?
FalejevV• 500@FalejevV
Posted
Hi! Ill try to answer your questions ;)
How to know font sizes?
- If your reference is an image, i think only by changing multiple times until it looks +- same. If you want to check font from other website, there is a website extention "WhatFont" that gives selected text information.
How to identify if an element has a box-shadow of with very low opacity?
- If im not sure, i use browser inspector.
How to know the exact spaces between different elements of the same parent?
- I use browser extention "Ruler" that shows width and height in pixels of your selected box. If you have an image and you need to measure spaces on it, you can drag it in browser and it will be displayed in new window. I work this way. You can use ruler and color picker extention on image that you open in browser.
Marked as helpful
1 - Brandon• 290
@branalex94
Submitted
I had a lot of issues implementing the chart bars, as I couldn't properly give them the size required, as well as in the live site the bars are even smaller than on development. Is there a better way to create those bars as to give them a reasonable size? Thank you very much iin advance!
FalejevV• 500@FalejevV
Posted
Hi. IDK if my solution is great but i did it using % height.
- Using JS you search a day that has the most money spent, that will be "Top one" with cyan color and it will be 100% of height.
- Then you loop through each day and calulate % difference from the "Top bar". ( For example Top bar is 100$. Is has 100% height. Another bar is 60$, so it will have 60% of height. )
- Pass calulated % as prop to bar "Height". I hope my bad explanation helped :P
Marked as helpful
0 - Julie_Gz• 450
@Julie-Gz
Submitted
Hello Frontend community, This was a tough challenge for me, and after trying for a long time I thought it would be best to get help. I couldn't get the function to calculate as the numbers are being entered in the input fields, so I tried to create a calculate button and add an event listener to it so the function would not execute before entering the data, but then I got a type error saying "cannot read the properties of null(addEventListener)", and I can't figure out what the problem is. Any help is deeply appreciated :)
FalejevV• 500@FalejevV
Posted
Hi! I think i found whats the problem with your button.
Your selector - document.querySelector("#calculator"); Button id is id="calculate".
They do not match ;)
2 - Émilia• 100
@BahAilime
Submitted
Tweaks
- I changed the submit button to practice using the ::after pseudo element
- I made the image from the "thank you" part (
illustration-thank-you.svg) move up and down in a loop
FalejevV• 500@FalejevV
Posted
Hi. It looks cool! :) The only thing I noticed is that when the "thank you" window appears, you can still click on the buttons hidden underneath and submit again. To avoid this, you can add the disabled attribute to the buttons after the button is pressed, or make a setTimeout to disable all window after fade animation ends.
Marked as helpful
1
