Skip to content
OverviewSolutions
9
Comments
3

slack

@slackwareeNew Zealand120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Order Summary Component with SCSS

    #sass/scss
    slack•120
    Submitted about 1 year ago
    0 comments

  • Testimonials Grid Layout

    slack•120
    Submitted about 1 year ago

    I struggled with aligning the avatar images next to the two blocks of text, and ended up just using a margin to do it. I tried giving the img elements display: inline-block and vertical-align: middle but they didn't move at all.

    1 comment

  • Four Card Feature Section

    slack•120
    Submitted about 1 year ago

    Was the method that I used to align the left and right cards viable? Was there a better option? It feels kind of hacky.

    1 comment

  • Product Preview Card

    slack•120
    Submitted about 1 year ago

    Is there any way I could make my CSS code a little smaller while keeping it easy to read? I feel as though 90 lines for a project of this size is quite a bit.

    2 comments

  • Blog Preview Card

    slack•120
    Submitted about 1 year ago

    I feel like the avatar image at the bottom of the card is not aligned horizontally with the text, and I'm not sure how to fix that. I've set the img element to have vertical-align: middle; but I'm not sure what else to do other than that.

    2 comments

  • Social Links Profile

    slack•120
    Submitted about 1 year ago
    1 comment
View more solutions

Latest comments

  • AntennaeVY•110
    @AntennaeVY
    What are you most proud of, and what would you do differently next time?

    I did it

    What challenges did you encounter, and how did you overcome them?

    None

    What specific areas of your project would you like help with?

    Margin vs padding ?

    Social links profile

    1
    slack•120
    @slackwaree

    Great work! When you say "margin vs padding?" are you asking about the differences between the two?

    margin is used to set the distance between elements while padding is used to set the distance of the content within an element from the edge of that element.

    Hope this helps!

  • m-rooeintan•70
    @m-rooeintan
    What are you most proud of, and what would you do differently next time?

    Nothing

    What challenges did you encounter, and how did you overcome them?

    To change product image from desktop mode to mobile mode, I use "background-image".

    What specific areas of your project would you like help with?

    Is there another way to change the image? I'm having trouble getting the links to display properly on GitHub. How to address so that images and fonts are loaded correctly in the live view? That is a big problem for me.

    Product Preview Card

    1
    slack•120
    @slackwaree

    Hi, are you having trouble with changing the image when a certain viewport width is met? A simple way of doing this is by giving each img element an id, respective of their use case. Then in your CSS file, hide one of the elements using display: none, and create a media query to display that image when the viewport width is met. Also, make sure to hide the other image. Example:

    HTML:

    <img src="image/source" id="perfume-image-mobile">
<img src="image/source" id="perfume-image-desktop">

    CSS:

    #perfume-image-desktop {display:none}

@media only screen and (min-width: 769px) { /* Desktop styles */
    #perfume-image-mobile {display:none;}
    #perfume-image-desktop {display:/*block/grid/flex*/}
}
  • Hadisuhail188•60
    @Hadisuhail188
    What are you most proud of, and what would you do differently next time?

    I am most proud of the face that I was able to finish this very fast and was very comfortable doing it.

    What challenges did you encounter, and how did you overcome them?

    One of the challenges that I encountered but was laster solved was that I didn't know how to upload the picture in the website but then I figured it out and it was quite exciting.

    What specific areas of your project would you like help with?

    I would like help with the media queries as I am still not aware of how they work.

    Social Links Profile

    1
    slack•120
    @slackwaree

    Great work! Instead of using media queries to change the size of the boxes, you can set their width to 100% (or any other value). This way, the boxes will always fit the width of their parent container - negating the use of media queries.

    Marked as helpful