Skip to content
OverviewSolutions
9
Comments
22
P
subu
@subu-v

All comments

  • subu•390
    @subu-vPosted about 1 year ago

    On the body element, use background-repeat:no-repeat; // so that the pattern don't repeat again. background-size:contain; // so that the background-image you used covers available width space. background-color: #000; // this will apply the color to the rest of the space that is not covered by the background image you used

    0
  • subu•390
    @subu-vPosted almost 2 years ago
    1. Coming up with good class names are indeed a pain but there is no proper methods to do so, we have to come up with class names ourselves.
    2. To practice flexbox, https://mastery.games/flexboxzombies/
    3. To practice grid, https://cssgridgarden.com/
    0
  • JackoWill•40
    @JackoWillSubmitted almost 2 years ago

    My third project on FEM. Absolutely loving it. It is really giving me motivation to learn more.

    Would love to hear feedback from people if I need to fix anything up, still a big newbie here so any tips would be much appreciated!

    Kind regards, Jacko

    Responsive Order Summary Component

    2
    subu•390
    @subu-vPosted almost 2 years ago

    Great works,

    1. you can see your background-image is repeating itself, in order to avoid that use background-repeat: no-repeat.
    2. Set the background-color of body element to the blue it shows on the required design
    Marked as helpful
    0
  • subu•390
    @subu-vPosted over 2 years ago

    You did well to get the exact results, one thing i will suggest is that, you can clearly see that your background-image is the not same as the required design background-image.

    Yours get repeating.

    To stop this, use

    background-repeat : no-repeat;
//this will stop repeating the background-image.
    Marked as helpful
    1
  • Vani•160
    @VANIMEHTASubmitted over 2 years ago

    1)How do i merge the two images ie the box image and person image as shoen in the design file. 2)Im still struggling with java script so somebody pls help with the script code its not working:/.

    FAQ-Accordian Card

    2
    subu•390
    @subu-vPosted over 2 years ago

    Regarding images, Use this property on the bigger image.

    transform:translateX(-values); 
This will move the image on the left, tinker with the value untill you archeive the desired output.

    As for the box image, use absolute positioning on it and make your container(parent of all element) position:relative;

    position:absolute;
top: some value;
left: some value;
transform:translate(-50%,-50%);
 //tinker with the values untill the desired outcome.

    To make the box to appear on top of the bigger image with the women. Use z-index property on the box image.

    z-index:-1;

    As for the functionality, please visit mygithub repository where i added the required functionality in 7 lines of code. https://github.com/subu-v/faq-accordian-component.git

    If you have any doubts, feel free to ask.

    Marked as helpful
    0
  • Venus•1,640
    @VenusYSubmitted over 2 years ago

    What are the best/most widely used practices when it comes to writing CSS?

    It was difficult to position the white block containing the amount left responsively without using JavaScript. Feedback regarding a way to do this purely using HTML and CSS (if possible) would be much appreciated.

    Fylo data storage component solution using CSS flexbox

    1
    subu•390
    @subu-vPosted over 2 years ago

    You could have use absolute positioning to position the white block. didn't you try?

    0
  • Carlos H.•90
    @KrossBRSubmitted over 2 years ago

    One more solution, I really liked the final result, this background made the design very beautiful.

    In this challenge, I was wondering, is it a good idea to use "rem" for margins?

    I feel that using "em" makes it more difficult to calculate.

    As always I would like to thank you for your attention in seeing my solution. 😉✌😊

    Order summary card solution

    1
    subu•390
    @subu-vPosted over 2 years ago

    It is a good idea to use rem unit for margins as well as for so many things.

    rem units is based on root element which is html. By default 1rem = 16px.

    To make calculation easy when using rem, make the font-size in html element to 10px which should be done in percentages so that it scales up and down according to the user browser font-size.

    10px/16px = 0.625 * 100 = 62.5%.

    html{
font-size : 62.5%; 
}

    Why you should do it this way?

    1. Let's if the user want's to increase the font-size in his/her browser, by default it is 16px, now if the user set to 20px, now the font-size in the html element will scale up accordingly, now the font-size will be 62.5% / 100 * 20px = 12.5px

    **Now for all things you set using rem unit in your project(eg margins,paddings etc) will change from 10px to 12.5px. **

    1. Another reason to do this, calculating rem units based on 16px is difficult compared to 10px which can be done easily.

    I hope you understand.

    Marked as helpful
    1
  • subu•390
    @subu-vPosted over 2 years ago

    Using tailwind css automates lot of the work, it speeds up the development of a project. But when it comes to learning css, it's all about doing the repetitive work, that's what initialize the things you learned. You can start using tailwind css when you feel comfortable and strong in css.

    Marked as helpful
    2
  • Ulises Benjamin Suhr•10
    @Ulises-SuhrSubmitted over 2 years ago

    I have recently started with JS and HTML forms and trying to merge my vague knowledge of those things resulted in a terrible headache. After that I have a great time building this project! Also the images didn't load, i don't know if i've made a mistake or if it's the server.

    01-fm-int-rat-comp

    1
    subu•390
    @subu-vPosted over 2 years ago
     <div class="star"><img src="./images/icon-star.svg" alt="star"></div>

    Here there is no need for you to go one step back cause your images folder and the index.html are under the same root folder, you directly select the images/icon-stat.svg.

    If you wanted to go one step back from your current folder, it is ../ not ./

    0
  • Rudolf Luayon•210
    @dumpdope1Submitted over 2 years ago

    PLEASES HELP!

    My struggles: Can't rotate the SVG up when it click I don't what's the main reason why I can't rotate it. I'm not really good in design Loooongs code for a simple click button I don't know how to shorten it OMG

    Your comments & suggestion are all welcome.

    SEMANTIC HTML | CSS @MEDIA QUERIES | SIMPLE JS

    2
    subu•390
    @subu-vPosted over 2 years ago

    Try this, for myself i simply created a utility class for rotating the svg icon-down.

    .rotate--180deg {
  transform: rotate(180deg);
}

    When the svg icon-down is being clicked, i will add this class to the element and it will rotate 108deg which will make the icon look upside.

    const showAnswer = document.querySelectorAll(".show-answer");

for (let i = 0; i < showAnswer.length; i++) {
  showAnswer[i].addEventListener("click", function () {
    showAnswer[i].classList.toggle("rotate--180deg"); 
   // This will add or remove the utility class whenever the icon is clicked
    );
}

                      <img
                    class="show-answer"
                    src="../images/icon-arrow-down.svg"
                    alt="chevron-down"
                  />

    look at my github to see how i done it. https://github.com/subu-v/FAQ-accordian-card.git

    0
  • SAIKAT BISHAL•10
    @saikatbishalSubmitted over 2 years ago

    I used the card with relative positioning and everything inside it had absolute positioning. Everything went great but I could not center the card vertically at the end. That is the one difference I have with the original thing.

    QR CODE CARD

    1
    subu•390
    @subu-vPosted over 2 years ago

    Just remove the from your .card element.

      position: relative;
  left: 50%;
  transform: translate(-50%, 50%);

    You can easily center any element inside of the body element which is parent to the all consecutive elements.

    Use the below code on the body element,

      height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
    1. In order to center a element vertically inside of a body element, the body element should have space in order to center anything vertically.

    2)Now setting height:100vh on the body element, make the height of the body to 100% of the viewport height (viewport height: the maximum height of the screen you see on your computer).

    3)f you haven't set the height to 100vh, the height of the body will be the height of the content available.You can see this in your dev tools, first see the height of the body before using height:100vh, then see the difference when you use height:100vh

    If you're new to the world of html and css, it's okay. Learn flex-box, and you''ll know what display:flex, ect those lines of code does.

    1
  • subu•390
    @subu-vPosted over 2 years ago

    hi, do not manually give height to your main element, let the elements inside your main element determine the height automatically.

    for example, the img has a height to it. Vertical margins and vertical paddings(top and bottom) you set for the elements inside the main element. so is line-height and font-sizes etc these are the one of the few things when combined determine the height of the main element.

    Try this in your dev tools in the browser, reduce the vertical margins or padding in your project, the whole component height will be reduced

    Marked as helpful
    0