Skip to content
OverviewSolutions
18
Comments
5
P
Ryan Hemrick
@Ryan-Hemrick

All comments

  • Ryan Hemrick•290
    @Ryan-HemrickSubmitted almost 2 years ago

    Hey!

    Here is my solution for the social proof section challenge. I found this project to be very helpful in learning how to approach a project with a more complex layout; understanding which elements need to be flex containers and how they should behave with relation to the other elements on the page.

    I have a question about my use of the blockquote element. I was curious if defining both a cite element and a p element within the blockquote is a good way to go about the testimonial section?

    If you have any feedback, suggestions, or improvements to my code, please let me know!

    Thanks!

    HTML & CSS (flexbox)

    2
    Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    Based on the validation report, it looks like my use of:

    <blockquote class="social__testimonial">
    <cite class="social__testimonial__author">
        <img src="images/image-colton.jpg" alt="A photograph of Colton Smith" class="testimonial__author__img">
        <p class="author__info">Colton Smith<span class="author__info__tag">Verified Buyer</span></p>
    </cite>

   <p class="social__testimonial__quote">"We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!"</p>

 </blockquote>

    did NOT pass the HTML validation test.. I refactored my testimonials to use the figure element instead, with nested figcaption and blockquote elements. Still not sure if this is the best way to do this

    0
  • Yevhenii Kozhevin•40
    @DexLuthorSubmitted almost 2 years ago

    Im not quire sure if i used rem correctly, thus not sure if responsiveness is properly in place :\

    QR code component

    2
    Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    Hey!

    With respect to your question above: Since rem units are relative to the font-size on the :root element, when you define a font-size: 10px on the :root, it updates your page to where 1rem is equal to 10px instead of the default 16px.

    Unless you are dynamically changing the :root element's font-size with media queries, the font-sizes of your elements and the padding you have set with rem units will not change on resize. (if I am interpreting your question properly!)

    One quick recommendation would be to add a style such as body { margin: 0; } because the default user agent stylesheet (for Chrome) is adding an 8px margin to the <body> that is causing both horizontal and vertical scrollbars to appear!

    I hope this was helpful. I still need to get better at using markdown...

    Marked as helpful
    0
  • Ryan Hemrick•290
    @Ryan-HemrickSubmitted almost 2 years ago

    My solution to this challenge was to use flexbox to vertically and horizontally center the component on the screen, split the description area and the image, and provide the inline positioning of the different stats.

    My biggest question has to do with scrolling on mobile devices. As of right now, I am setting my display: flex; on the <body> element, which has height: 100%; to vertically center the component. Because this component is fairly tall, on smaller mobile devices, the body element's height is actually less than the component, which causes some of the content to not be scrollable.

    I messed around with using display: grid; but I haven't been able to find a reliable solution that maintains vertical alignment and automatically adjusts the body's height to fit the content on smaller devices. I would appreciate any kind of insight on this! There is also some refactoring that I need to work on with my CSS!

    Thank you!

    HTML & CSS Solution (Flexbox for layout)

    1
    Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    A quick update to my solution.

    I have replaced the previous height declaration of height: 100% on the <body> element with a min-height: 100%; instead. This has solved my problem with the component getting cut off at smaller heights. Before setting a min-height, the <body> element's height would only ever reach 100% of the viewport height. With min-height: 100%, the body now automatically adjusts it's height to match the component, while maintaining vertical centering

    1
  • Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    Hi Codey!

    I really like your use of media queries and flexbox here! One small piece of feedback would be adding a cursor: pointer to your button. Aside from that, I like what you did here!

    Marked as helpful
    1
  • Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    Hi Okobi!

    With the body element having a fixed width (of 1440px), it prevents the page from responding properly when it is resized and also prevents the card from being centered (horizontally) unless the window size is exactly 1440px.

    I would recommend removing the width: 1440px from the <body> element, in order to horizontally center the card. Within your media query for mobile, I would also recommend removing the fixed width (width: 375px) so that the card centers itself horizontally.

    I like your use of Flexbox here! I'm pretty new to using it, so it is always good to see how others approach it!

    Marked as helpful
    1