Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions6Comments6

All comments

  • Kemystra• 200

    @Kemystra

    Posted

    Hey @Dagime-Teshome, congratz on solving this challenge!

    The big thing to improve in making a responsive site is to use relative units rather than fixed ones. px are literally pixels, so that's obviously fixed. Some common relative units are vh, vw, rem, %, etc. Try to experiment with them and look up docs for more.

    Specifically for this site, instead of centering the card with a containerClass and margin: auto (which is an old trick), you can use CSS Flexbox (learn more here).

    A few small tips:

    • Add this snippet to every project that you will ever make:
    * {
    box-sizing: border-box
}

    This ensure that width of an object will also include its padding. Seems insignificant until you start banging your head on how to calculate widths with variable padding.

    • Not every element needs a class. Try to not add them until you need it. Once projects get larger, it will be easier to keep track of used class names. Besides, a big project will usually force you to use more type of CSS selectors anyway.

    CSS is damn weird, but satisfying in a way. Good luck and happy coding!

    Marked as helpful

    1
  • georgefrg• 100

    @georgefrg

    Submitted

    cant find a way to make the image violet

    flexbox

    1

    Kemystra• 200

    @Kemystra

    Posted

    Hey, congratz for solving the problem!

    I just wanted to share how I made the image violet. But firstly, I used the picture tag instead of just the normal img tag. It helps to switch between images depending on a CSS media query (e.g: switch between mobile and desktop specific images based on width).

    picture tag is pretty much a special div, and you put an img tag inside. What I did was I set the picture background to violet. You can then use the CSS property mix-blend-mode. Basically it will blend the image with the background color. There are a lot of values that you can use with mix-blend-mode, so try to experiment to see which one will achieve the closest result.

    Marked as helpful

    0
  • Fazle Labib• 400

    @FazleLabib

    Submitted

    Would like to know what is the best way of creating the services section which consists of Graphic Design and Photography. I had a hard time positioning the text over the image to keep it consistent for different screen sizes.

    Any other feedback regarding the whole design and suggestions on making the code more efficient is highly appreciated.

    Sunnyside agency landing page using Flexbox, CSS Grid and JavaScript

    #animation

    2

    Kemystra• 200

    @Kemystra

    Posted

    Another way you may consider is to ditch the use of padding for class service-content. Instead, set the property justify-content to flex-end. All of the text will then go to the bottom, and you can set the gap between them with the gap property (or just use margin, I guess). This guarantees your text to not overflow due to lack of empty vertical space.

    To do that however, you need to have a fixed height for the services-item class. One trick that I used is to set the aspect-ratio to be the same as the background-image's aspect ratio. For example, if the image is 400x500 in resolution, then I will do aspect-ratio: 4 / 5. This will maintain the div's proportion to the image.

    Marked as helpful

    1
  • Kathleen Jogno• 20

    @redKath

    Submitted

    I didn't make a media query for bigger screens because the component still looked good when I was testing for responsiveness. Is that okay? Or should I've made 2 media queries?

    QR code component

    1

    Kemystra• 200

    @Kemystra

    Posted

    Congratz for completing the challenge!

    Note that "bigger" screen here means higher resolution. Smartphone nowadays were shipped with HD displays that fit in your palm.

    I tested your site on Redmi 10 and iPad Mini 4 and it's holding up to the task. A fixed size container like what you made here is enough.

    So nope, unless if the layout needs to be changed significantly on bigger screen, you don't need another media query.

    Marked as helpful

    0
  • Daníel J. Einarsson• 30

    @djeinarsson

    Submitted

    Hello, How do I center the bootstrap row or column (col) vertically and horizontally? And how am I supposed to make this challenge responsive, on resizing it looks alright on smaller devices, thank you for advice.

    qr-code-challenge

    1

    Kemystra• 200

    @Kemystra

    Posted

    HI @djeinarsson, congratz for your solution!

    Unfortunately, I don't have an answer for your Bootstrap question, though I would avoid them if I'm starting out on CSS.

    With that being said, simply having a fixed size component should be enough. However, if you want to get a bit advanced, you can use relative units and CSS clamp() function onto the container.

    /* 
clamp(min, preferred, max) 
clamp() allow properties to follow the preferred value
limiting it between the max and min values.
Here's an example:
*/
.container {
  height: clamp(400px, 60%, 1000px)
}

    Marked as helpful

    0
  • Kemystra• 200

    @Kemystra

    Posted

    Inside the Design Comparison, it seems like your solution is bigger than the design. Can you elaborate the question, as I don't see anything shrinking?

    0