Skip to content
OverviewSolutions
33
Comments
14
...
@HatimHJ

All comments

  • ...•600
    @HatimHJPosted about 2 years ago
    .container-grid {
    display: grid;
    width: 200px;

    /*  grid-template-rows: 1fr 140px;  */

}
    0
  • ...•600
    @HatimHJPosted about 2 years ago

    i'm learning github [especially pull request] that whyi fork your project (hope you don't mind)

    0
  • Mahdi Rezaei•500
    @MahdiSohailySubmitted about 2 years ago

    Hello everyone, I have completed this challenge but one thing was pretty challenging for me, (the images section) in the mobile view, the order of containers has to be vertical but as all images have absolute position the height of the container becomes zero, I also can't use fixed sizes then I have to use min and max but the problem with the theme is this, as the viewport shranks the position of absolute positioned images also changes. check the live site URL and resize the browser you will notice better. https://mahdisohaily.github.io/faq-accordion-card-main/

    I really appreciate your advice. I had the same problem in one other challenge as well.

    FAQ Accordion Card

    1
    ...•600
    @HatimHJPosted about 2 years ago

    nice work. try padding top and bottom for the main tag

    1
  • Rio Rifaldi•100
    @rio-rifaldiSubmitted about 2 years ago

    Hello everyone 🙌

    this is challenge that challenged my frontendmentor.io. i hope you enjoy my project <br>

    features

    • DarkMode 🌔 ☀️ & typing + fade effect

    • Responsive design 📱

    • accessibility 👨‍🦯

      accessibility keyword ⌨️

      • Alt + Shift + D : change color theme 🌔
      • Alt + Shift + F : go to frontendmentor.io 💻
      • Alt + Shift + R : go to my github repository 🖥️

    • my question

    can anyone tell me how to directly choose color contrast for dark mode? i actually getting stuck for choosing color. or may be you have some good resouce for helping me choose dark color pallete, i will be very respect if you tell me. and one again, if you have some suggestion about dark mode please tell me. i will be very happy

    thank you for whoever create this challenge for me and us. this is very challenging any feedback will be welcome.

    thank you very much ✋

    responsive card with grid css

    1
    ...•600
    @HatimHJPosted about 2 years ago

    you put the colors in css variables in the body selector when dark mode clicked you give the body class like 'dark' in other slector [body.dark] you change variables colors .

    that how i did it in this challenging and it worked fine. there's a little bit of javascript

    Marked as helpful
    1
  • Glow•140
    @TheAwesomeTechGirlSubmitted about 2 years ago

    I really need an explanation on how to do the mobile design, please I would appreciate a detailed explanation

    stats-preview-card

    1
    ...•600
    @HatimHJPosted about 2 years ago

    media (max-width: 375px){ .container {

    grid-template-columns: 1fr; // add this to the container

    }

    .images {

    grid-row: 1; // this to the image

    }

    //or .text-box { grid-row: 2; // this to the text }

    }

    Marked as helpful
    0
  • KurtJF•150
    @KurtJFSubmitted about 2 years ago

    Still not confident about how I use CSS. I feel like my code has a lot of unnecessary input.

    • Can my CSS be more efficient and clean?

    • Is there a set breakpoint for responsive media query?

    Responsive Four Card Feature

    2
    ...•600
    @HatimHJPosted about 2 years ago

    congratulations on finish the challenge

    Is there a set breakpoint for responsive media query?

    • Mobile: 375px
    • Desktop: 1440px

    when you code you should start with mobile then you adjust for desktop. this how i do it and it work ok for me

    0
  • ...•600
    @HatimHJPosted about 2 years ago

    you can use [filter: brightness(0) invert(1);] to make the footer logo white

    Marked as helpful
    1
  • ...•600
    @HatimHJPosted over 2 years ago

    The keystone of AJAX is the {XMLHttpRequest} object.

    • Create an XMLHttpRequest object
    • Define a callback function
    • Open the XMLHttpRequest object
    • Send a Request to a server

    w3schools

    0
  • Canti•110
    @Canti21Submitted over 2 years ago

    I think the result is ok, but... How can I center both horizontal and vertical an element (div for example) the most optimal way? (If possible without using flex, grid or position)

    Anyway, any feedback, comment or question is welcome :)

    Single Price Grid Component

    2
    ...•600
    @HatimHJPosted over 2 years ago
    This comment was deleted about 2 years ago
    0
  • Nikita•120
    @nyakitaSubmitted over 2 years ago

    I completed this challenge, but I still think how to solve some issues related to button, cause I cannot understand why it's not active when it's pressed. Also please I would like to have some grid explanation, as it seems like it's not clear for me, would be good practice to combine it with flexbox if so, please provide some brief explanation.

    Thank you!

    HTML + CSS + GRID

    2
    ...•600
    @HatimHJPosted over 2 years ago

    for the button try use [button:hover] insted of [button:active]

    for the grid try this site [ https://cssgridgarden.com/ ] great for learning css grid

    if you find this helpfully please mark as helpfull

    Marked as helpful
    1
  • Moataz•210
    @moataz-seragSubmitted over 2 years ago

    Hello Frontend Mentor community. This my solution and i want to ask a Question . where can i get the white logo ? Thanks! and Welcome to all feedbacks.

    Responsive landing page with flexbox

    1
    ...•600
    @HatimHJPosted over 2 years ago

    try css filter [filter: brightness(0) invert(1);]

    Marked as helpful
    1
  • aLpSabre•180
    @alpbraceSubmitted over 2 years ago

    I have two questions:

    1-When I open my website with the extension Live Server on VS, my website works fine. But when I open my Html page from the folder directly or with the Live Url, the font sizes of the texts become smaller, and some media queries are not working. Which reason would cause that?

    2- How can I create the section with the header "Ready To Build Your Community?" before the footer, without using position absolute and in a better responsive way?

    If you could help me out with those two questions, I would be grateful.

    Thank you in advance.

    alpbrace

    Basic Responsive Landing Page Using only HTML and CSS

    2
    ...•600
    @HatimHJPosted over 2 years ago

    2- How can I create the section with the header "Ready To Build Your Community?" before the footer, without using position absolute and in a better responsive way?

    i did it with [ transform : translateY(-value) ] and it worked fine

    Marked as helpful
    1