Skip to content
OverviewSolutions
7
Comments
6

Petabyte

@peta-8-bit190 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

View more solutions

Latest comments

  • Petabyte•190
    @peta-8-bit

    Hey! good work with the challenge.

    • I was reading your comment for this challenge, I am not sure if the middle column actually has text occupy more width than the other columns. It looks same to me. However you can adjust it with padding-left and padding-right with a class name like .middlecolumn or whatever.

    • The Screenshot is zoomed in to match the aspect ratio (to make side by side comparison)of your page which is more than 100vh so your webpage is zoomed out and the comparison is zoomed in(instead of the normal landscape view + lot of white space). I suggest you make the page height to be at-most 100vh

    Overall i would suggest that you try to stick to the given design(height, heading width is way too narrow on desktop view). Otherwise it is a well done challenge.

    Happy Coding ╰(°▽°)╯

    edit:Changed margin-left and margin-right to padding-left and padding-right.

    Marked as helpful
  • Petabyte•190
    @peta-8-bit

    @valerietonsor congratulations on Completing the challenge 🎉

    • Regarding positioning and spacing, learn Flex-box and Grid which are absolute essentials for CSS and there is no way around it. This will help you center div and even create basically any layout possible.I suggest this youtube channel for all things CSS.
    • After you have learnt flex-box and grid, I would suggest you learn semantic tags such as main, nav,section,etc in html. This would take maybe 20 minutes to learn.
    • In this challenge for the mobile layout we have to replace the image with another image which can be done with picture HTML tag.

    Hope this helps. Happy coding.╰(°▽°)╯

    Marked as helpful
  • Petabyte•190
    @peta-8-bit

    @AnthonyLeDu Congratulations on completing the challenge 🎉

    I was also doing the same challenge today and I have only one suggestion. We can use width and max-width on the same element style them for different viewports without using media queries. For example in this challenge I used width:80% and max-width:450px so that on wider screens, the card looks just a little bit bigger since users are sitting further away from the screen, than on a mobile device.

    Happy coding╰(°▽°)╯

    Marked as helpful
  • Petabyte•190
    @peta-8-bit

    Congratulations @AbibGuardian50 for completing you first Junior level challenge 🎉🎉

    I am also fairly new to web development, but here are my two cents:

    • I would recommend having the logo and navbar out of the main grid since they go on one line only.
    • The responsive layout works alright, however the navigation items cant be seen, the main picture can be replaced with the square picture.The layout needs to be centered in both desktop and mobile version.
    • Kudos on incorporating semantic tags like main and section. My only recommendation is the right-content and bottom-content can be wrapped in the section tag and the individual articles inside article tag.

    I know it sounds like so much work, but when i did this challenge i took 1 full day just trying to figure out the navbar. I don't even want to talk about the entire challenge, but it gets waaayyy easier after doing it right one time.

    Happy Coding╰(°▽°)╯

    Marked as helpful
  • Petabyte•190
    @peta-8-bit

    @AbuKesh Congratulations on completing you first Challenge🎉🎉.

    Regarding the alignment and sizing, your current approach is not wrong, however when you set the outlines for all the elements, you can see the image is contained in a bigger portion and thus the entire layout is not actually present in the center even after using align items. Setting display:inline-block on the .image class would be better rather than setting it on con1.

    Regarding the width of the two section, Since one half is image which has a fixed proportion on height when you set width, and the other half is text only which can change proportions according to the length of content, it is hard to get the same width and height on both.

    You mentioned you are yet to learn grid, I would highly suggest, you learn the basics of flexbox and grid before doing any challenge. Also start with the QR-code component challenge which is very similar to this but less complex. Also the QR-code challenge does not really need a mobile design unlike this challenge.

  • Petabyte•190
    @peta-8-bit

    Regarding the footer position, you can use position:fixed and set text align, bottom,left and right properties.