Skip to content
OverviewSolutions
7
Comments
12
Lartzmanuel
@Lartzmanuel

All comments

  • Lartzmanuel•190
    @LartzmanuelPosted 11 months ago

    Site looks pretty great! Great job👍 In your github repo I found your .gitignore file. gitignore are not meant to be accessed by anyone who views your repository. This is because gitignore files usually contain sensitive data such as passwords. I don't know how you uploaded it in your repo but make sure it's not accessible to others so that sensitive data wouldn't be compromised! Hope this helps!

    0
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Hi there, I just checked your site using mobile phone and everything wasn't in place. Try to make your design responsive to mobile screen by designing your app using mobile first approach Remove the box shadow as it was not in the original design Add some padding in your input to also create some spacing. Try to also play around the font sizes to get your design closer to the original design I hope this helps!👍

    1
  • arikanb•20
    @arikanbSubmitted 12 months ago

    ###I found difficult to change the image for responsive design. How can I change the image without JavaScript, with only css?

    Parfume_BeytullahArikan

    3
    Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    You can use media queries like this:

    @media-query only screen and (min-width: 700px){
.image-container {
    content: url(/assets/images/etc);
    Object-fit: cover;
  }
}

    Note that I just used 700px as my break point for example sake. You can adjust the break point to your liking.

    I hope this helps👍

    0
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Hey Man, Site looks pretty great in terms of layout. A few things need to be handled. When you hover over some of elements they don't change colors as required in the project. You also need to handle your button's background when hovered on. Your site is not mobile responsive. These issues when handled will make the site perfect! Keep up the good work man :)

    Marked as helpful
    1
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Hey there, Checked out your site and it's pretty cool.. But a few things.. It'd be better to rather target all html elements and reset to allow proper layout control. Code below

    * { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    Aside that I think every other thing is fine. Hope this helps!

    Marked as helpful
    0
  • Fluffy Kas•7,715
    @FluffyKasSubmitted 12 months ago

    Heyo,

    This is my solution to the product preview card challenge. Wasn't too complicated so I turned it into a speedrun. Managed to code and deploy it under an hour. If I missed anything, feel free to point it out!

    Product Preview Card

    1
    Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Hi there👋. You managed to get your design almost like the original design. That's great!..And what did you say? You this everything under an hour that's really crazy💪. Checked out your codes too and it was clean. Saw a few things in your code I've never known. You're really someone I'd like to learn from🤗🤗

    Great Job there!!

    0
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Site looks great but some few alterations have to be made. On mobile screen your image has some padding. Which is not supposed to be so according to the original design. Also "Valid email required" which shows up after a user enters an invalid email should appear at the right top corner of the input box. Your success message screen which also appears after a successful validation is actually supposed to be for a desktop screen rather than a mobile screen. There's a success screen for mobile view too. Kindly check that out and make the design for that too. I hope this helps!

    0
  • Gustavo Dias•290
    @ogustavodiasSubmitted 12 months ago

    Hey guys!

    This is the first advanced level project that has been completed here on the platform, using a recently learned framework. Therefore, it was very difficult to complete this project, and despite having achieved it, I am sure that there are many opportunities for improvement, especially in the code.

    I would be very grateful if you have any tips and constructive criticism.

    Multi step form with React (Vite)

    1
    Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Site looks really great man! Just checked it out and everything works fine. Great Job!!

    Marked as helpful
    1
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Site looks cool. A few things you need to add

    body {
 display: flex;
 Justify-content: center;
 align-items: center;
 min-height: 100vh;
}

    This code will center you card both horizontally and vertically.

    Also try to adjust paddings of the texts so that it can look close to the original design

    Hope this helps👍

    0
  • Saurav Chakrobartty•140
    @Saurav-Q1Submitted 12 months ago
    1. Adding the custom fonts was a little difficult for me
    2. I did not knew that i can hide overflow of a parent div

    Can anyone suggest a better way for adding custom fonts? Thanks in advance.

    Sorry for my English.

    Product review page

    2
    Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    To add custom fonts you can use the @font-face rule..

    @font-face {
  font-family: 'The font family ';
  src: url('path to the font');
}

    To learn more you can read from here

    Hope this helps👍

    Also try to make your site responsive for all screens

    0
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago
    body {
display:flex;
flex-direction: column;
Justify-content: center;
Align-items:center;
min-height: 100vh;
}

    When the flex direction is set to column it will bring the info beside your card to the bottom just as you would want. With the min-height you can choose to use 100dvh.

    Hope you find this useful👍

    Marked as helpful
    0
  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Media queries in CSS are used to apply different styles for different devices or screen sizes. They allow you to create responsive designs that adapt to various devices, such as desktops, tablets, and mobile phones. Here's a general structure for writing media queries:

    @media only screen and (max-width: 600px) {
  /* Styles for small screens */
}

/* Media query for medium screens (e.g., tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Styles for medium screens */
}

/* Media query for large screens (e.g., desktops) */
@media only screen and (min-width: 1025px) {
  /* Styles for large screens */
}

    If you use a mobile workflow first, note that the initial styles you write before any media query will be for mobile screens. You can read more about media queries here

    I hope I helped :)

    1