Skip to content
OverviewSolutions
16
Comments
9
FalejevV
@FalejevV

All comments

  • FalejevV•500
    @FalejevVPosted about 2 years ago

    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
    @DavincyProjectSubmitted over 2 years ago

    can someone explain to me how to replace images with css or whatever u know, from desktop images to mobile images

    Using Flexbox

    3
    FalejevV•500
    @FalejevVPosted over 2 years ago

    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
  • FalejevV•500
    @FalejevVPosted over 2 years ago

    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
  • Astijus Karvauskas•80
    @astijusk101Submitted over 2 years ago

    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?

    Responsive Three Column Layout using HTML and CSS Flexbox

    1
    FalejevV•500
    @FalejevVPosted over 2 years ago

    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
  • FalejevV•500
    @FalejevVPosted over 2 years ago

    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
    @AmandagneSubmitted over 2 years ago
    • 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?

    product-review-frontend-mentor

    4
    FalejevV•500
    @FalejevVPosted over 2 years ago

    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
    @branalex94Submitted over 2 years ago

    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!

    Responsive expenses chart component using react,sass and vitejs

    2
    FalejevV•500
    @FalejevVPosted over 2 years ago

    Hi. IDK if my solution is great but i did it using % height.

    1. 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.
    2. 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. )
    3. Pass calulated % as prop to bar "Height". I hope my bad explanation helped :P
    Marked as helpful
    0
  • Julie_Gz•450
    @Julie-GzSubmitted over 2 years ago

    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 :)

    Grid layout and flexbox, and vanilla JavaScript

    3
    FalejevV•500
    @FalejevVPosted over 2 years ago

    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
    @BahAilimeSubmitted over 2 years ago

    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

    Interactive rating component (pure css / js)

    1
    FalejevV•500
    @FalejevVPosted over 2 years ago

    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