Skip to content
OverviewSolutions
10
Comments
15
Siddhesh Kamble
@Sk7867

All comments

  • Andrew Grady•175
    @agr227Submitted over 3 years ago

    My live preview with VS Code showed everything and was responsive to the size of the page, yet my live website through GitHub isn't showing any CSS and I don't know how to fix it. Any filing/formatting recommendations to solve this?

    Regarding the code, I enjoyed the challenge of using EM and REM for the first time. As well, I wanted to play around with display: flex and other Flexbox tools. I liked how easy they were to pick up and can't wait to keep practicing them!

    As always, any and all comments or help are always appreciated! Sorry again if you're just seeing my HTML and zero CSS...

    3 column layout/responsive flex

    2
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi ANDREW GRADY, There's a small problem with all the href in your HTML code.

    1. In your stylesheet link in head it should be ./style.css due to one missing . it is not linking to your stylesheet.

    2. Your svg icons are not in images folder on github so remove ./images/ just keep ./icons-sedans.svg or icons-sedans.svg in href.

    3. Add border-radius to your container or individual divs according to design.

    Happy Coding!!

    0
  • Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi Michelle, It looks good on desktop but in mobile view and tablet view, 3rd section is not visible, in body put min-height: 100vh instead of height: 100vh and padding-top: 20px or any value you like so it doesn't stick to the top in mobile view.

    Marked as helpful
    1
  • Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi LESTER NIEL FONG, Add <div class="overlay> inside img like this:

    <div class="card image">
      <div class="overlay"></div>
      </div>

    and give following properties to overlay:

    background-color: rgba(153, 53, 216, 0.6);
  height: 400px;
  border-radius: 10px 10px 0 0;

    Happy Coding!!

    Marked as helpful
    0
  • Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi JEFFREY IZELAAR, You need to change mobile breakpoint, keep it around 768px, 376 px is kind of wrong. 768px is tablet width. It looks good in all views.

    The font design seems similar.

    0
  • Kashyap Pandya•50
    @Kashyap-PandyaSubmitted over 3 years ago

    check out this 3column preview site, let me know if there is a better way to do things, feedbacks are highly appreciated. i was really stuck with link activate state for 4 hours, Yeah crazy right ! finally figured it out yey.

    3 column preview with grid and flexbox

    2
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi KASHYAP PANDYA, Along with what @Thulani Gamteni suggested, add margin: 20px or any value to section in mobile and tablet view, that way your section won't take the whole screen in those views.

    0
  • Bogdan-Mihail Pavel•625
    @codeguy9Submitted over 3 years ago

    How I can center the div vertically? I don't know why there are so much errors on my solutions. I really can't understand them. There are too much rules to obey, you actually forget the delight of coding.

    HTML, CSS, FLEXBOX

    3
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi Bodgan, In your .main-div keep margin: 50px auto, it will give fixed top/bottom margin as 50px.

    For the first HTML validation error put <!DOCTYPE html> at the very start of your HTML code, for others I recommend removing the role attribute.

    Happy Coding!!

    Marked as helpful
    0
  • AleaToir3•85
    @AleaToir3Submitted over 3 years ago

    Hello everone any feedback ? i make an index : https://aleatoir3.github.io/frontEndMaster/ funny no ?

    HTML CSS

    2
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    The frontend mentor clone looks great!😃 Fix height problem with container and make it more responsive.

    0
  • Pranjal Verma•10
    @pranjal-vermaSubmitted over 3 years ago

    Hi, I could not figure out how the image was made purple. Also when i mobile, i switched image's object-fit to cover but it was still cropped out, how can I fix that? Cheers

    Card component using HTML and CSS Flex

    2
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Make image purple by wrapping overlay inside image, like this:

    <div class="card image">
      <div class="overlay"></div>
</div>

.image {
    background: url(images/image-header-desktop.jpg) no-repeat center/cover;
    min-width: 50%;
    border-radius: 0 10px 10px 0;

background-color: hsla(277, 64%, 61%, 0.6);
    height: 400px;
    border-radius: 0 10px 10px 0;

    By setting image through CSS you can change images using media queries. The above .image class is for laptop view. for mobile view:

    background: url(images/image-header-mobile.jpg) no-repeat center/cover;
    height: 400px;
    border-radius: 10px 10px 0 0;
}

    This way you won't have to give two <img> instead use one and change background: url().

    Also don't use body as your container, instead have separate <div class="container"> inside body.

    I hope this helps you, Happy Coding! 😄

    Marked as helpful
    1
  • Deepthi M R•90
    @Deepthi-RameshSubmitted over 3 years ago

    Hello everyone ! Here is the solution for single Price grid component which is totally responsive using HTML & CSS .My design may differ when viewed in different zoom of screen , so you guys can view the screen in 100% width. I do not know how to keep my screen static in different zoom .I am open to take any suggestions to improve code efficiency and make my design look better. Thank You

    single price-grid-component-master Using HTML & CSS

    1
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hello Deepthi-Ramesh 👋, Your solution great and is responsive on mobile and desktop view but it breaks at tablet view i.e. width: 768px to 1000px. I suggest keeping width fixed or using min-width or max-width property to prevent it from shrinking or expanding too much as width of screen changes.

    Also give box-shadow: 0px 8px 15px rgb(0 0 0 / 10%) effect to button so it pops up a bit. You can also mess with hover effects. Happy Codding😁

    Marked as helpful
    0
  • Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hi @Nene16👋 You did a great job with flex-box, It looks and works well. But as @Josiah Mokobo said using grid would save a lot of time and effort. I would suggest playing with css hover effects to make it more cool, Happy Codding😁

    0
  • Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Hello BrendaMichellle 👋 There's a small problem with your HTML code. Start your img src link with ./images and so on. Because of single ( . ) both of your images are not accessible. Also your solution says 404 in image, when submitting live site link pass it with index.html file like this: "https://brendamichellle.github.io/profileCardComponent/index.html So others can access properly. It looks great once you fix those. Happy Codding!😁

    1
  • Shivam Kumar Gupta•50
    @shivam5750Submitted over 3 years ago

    I have not implemented the mobile view for now .... but any feedback for my desktop view will be appreciated .. thank you

    Blogr landing page

    2
    Siddhesh Kamble•330
    @Sk7867Posted over 3 years ago

    Looks good on desktop, as @Amanpatil-Dev said try mobile-first approach. Also in your HTML code on line 69 there h6 tav class name issue.

    0