Skip to content
OverviewSolutions
8
Comments
14
KARTHIK
@thekarthikr

All comments

  • Matthew•380
    @matthew-marcoSubmitted almost 2 years ago

    Idk but I think I got alot of wrong things done here and I cannot write media for the phone screens so anyone can help me do that

    single-price-grid-component-master

    1
    KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hi Mathew, Your solution for this challenge comes really well But I recommend you try this with display: grid instead of display:flex . Also, you can make this responsive for mobile screen sizes using media queries.

    I hope it helps, Have a great time.

    Marked as helpful
    0
  • KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hi there, You can try <picture> element instead of writing media queries for the image.

    <picture>
  <source media="(min-width: 650px)" srcset="img_lg.jpg">
  <source media="(min-width: 465px)" srcset="img_s.jpg">
  <img src="img-xs.jpg">
</picture>

    That would be so easier. Hope it helps , Have a great time.

    0
  • Mohammad Talim•200
    @Md-TalimSubmitted almost 2 years ago

    Thanks for reviewing my solution. I have some questions about units. Which unit to use for font-sizes, margin and paddings. Should i use %s or rem or ems for height and widths.

    Testimonials Grid Section Using CSS Grid

    2
    KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Mohammad Talim, Absolute units(px ) are always fixed the value doesn't change. On the other hand Relative units are responsive For example % is Relative to the size of the container, vh and vw are relative to the viewport, and em and rem are relative to the font size. You can use rem units for fonts and em units for media queries. WHAT UNIT YOU USE IT DEPENDS ON WHAT PROBLEM YOU TRYING TO SOLVE.

    Hope it helps. Have a great time.

    Marked as helpful
    0
  • KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Florim Bulica, Your solution for this challenge comes really well. Somehow we all are bad at naming for classes or come with a wired name. To avoid this I recommend you to use BEM naming convention/methodology it will make so easier .

    For example: <div class=about> <h2 class=about__heading> About </h2><p class="about__description> lorem ... </p></div>

    To know more about BEM visit the link down below

    https://getbem.com/naming/

    And one more thing adding some padding around the footer would be better.

    Have a great time.

    Marked as helpful
    0
  • Ajay c•60
    @ajaychandruSubmitted almost 2 years ago

    It was difficult to make svg image responsive i.e changing its width and height as the screen size changes . any suggestions?

    clipboard-landing page

    2
    KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    You can add .mw-100 to the <svg> so the image will always adapt to the width of its container.

    Marked as helpful
    0
  • Ajay c•60
    @ajaychandruSubmitted almost 2 years ago

    It was difficult to make svg image responsive i.e changing its width and height as the screen size changes . any suggestions?

    clipboard-landing page

    2
    KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Ajay C, I Hope you are doing well. In your footer section, the Contact us link stands out from other footer links you can use nav-item and nav-link to fix that.

    Have a great time.

    Marked as helpful
    0
  • KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey there, Hope you're doing well. Having a responsive website essential, Most of them access websites through their mobile, and I can see you using media queries on your website but it gets overflowing when I resize browser window.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    I hope it helps. Happy coding.

    Marked as helpful
    1
  • KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Dheeraj Kumar Yadav, I Hope you're doing well. I really like the results of your project, here are some suggestions that would improve your code. Your desktop version of this challenge is good but when it comes to mobile size it collapsed. Highly recommend you to consider responsive design

    Add flex-direction: column for mobile devices.

    Hope it helps. Have a good time.

    0
  • madhaus•1,040
    @festsnusaSubmitted almost 2 years ago

    Hello everyone! I've tried to position article section with position: absolute, but failed. Now, my article section looks messy when you try to resize the window. So, if you know how to center article section or if you found some bugs, be sure to write down a comment.

    Thanks in advance.

    Loopstudios Landing Page using Pug & SCSS

    2
    KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Madhaus, Hope you doing well. Make your main class position relative and make your main-box class position absolute.

    .main{ position:relative; }

    .main-box{ position:absolute: //top right as you want }

    Hope it helps , Have a great time.

    0
  • Xoel Veiga•60
    @XoelVeigaSubmitted almost 2 years ago

    Feel free to told me what to do better and I didnt know how to change the see more icon to white on hover cose it is a svg file, someone can help me with that?

    Div usage and position relative

    1
    KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Xoel, There are a lot of methods to change the SVG image color on a hover state, here are a few SVG: hover{fill: red;} you can find the fill property inside that SVG code, On the other hand, you can use filter property to change the color of an SVG on a hover state.

    To know more visit this link, https://css-tricks.com/change-color-of-svg-on-hover/

    Hope it helps.

    1
  • KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey wrongju, Your solution for this challenge comes really well. Here are the changes that you will enjoy. Remove max-width in a container class, Having a responsive website essential, Most of them access websites through their mobile, so I recommend you use Media queries for the responsive layout. Media queries are a key part of responsive web design,

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Hope it helps.

    0
  • KARTHIK•320
    @thekarthikrPosted almost 2 years ago

    Hey Ahmed Kamal, It's better to use display:grid instead of display:flex for this challenge. gird-template-columns and grid-template-rows specify the size of the columns and rows, and how many columns and rows are in the grid layout. Want to know more about display: grid refers to the websites shown below.

    https://css-tricks.com/snippets/css/complete-guide-grid/

    https://www.w3schools.com/css/css_grid.asp

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

    https://cssgridgarden.com/

    I hope it helps.

    Marked as helpful
    0