3 Column Preview

Community feedback

• 

  Alex Efimenko•340

  @aleksandr-efimenkoPosted over 1 year ago

  Hello @frkanyilmaz2,

  Great job!

  The reason why the button moves slightly when hovering is due to the border property. When you add a border to an element, it increases the size of the element, which can cause it to shift position. To prevent this from happening, you can use the outline: 1px solid #f2f2f2; property instead of border in your .buttons:hover styles. The outline property will add a border-like effect without changing the size of the element, so there won't be any shifting when you hover.

  Alternatively, you can add a transparent border to your .buttons styles. This will create space for the border to be added when you hover, without changing the size of the button. You can do this by adding border: 1px solid transparent to your .buttons styles.

  I hope this additional information is helpful to you in understanding the cause of the issue and providing alternative solutions to fix it.

  Marked as helpful

  1

  ---

  

  Furkan Y.•80

  @frkanyilmaz2Posted over 1 year ago

  @androidblog Thanks for your interest and information. I appreciate it.

  0
• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  Hi, @frkanyilmaz2. It's a good solution. Keep coding. I have some suggestions for you.

  The HTML Structure

  • Use the anchor element a instead of button. a element is used as CTA - call the action button. If you link somewhere or something, you can use a. You can use button element to send a form as a submit button. Keep it simple and use a element for your links. Be aware, the anchor element has display: inline for its initial value. You should change this to display: inline-block to give it the padding and margin values.
  • Use BEM notation to add classes to your elements. This will help lower the specificity of your selectors and avoid any conflicting declarations.
  • Don't omit alt attribute in the img element. It's necessary for the screen readers and search engines and you can also need some of the information about the images when they break.

  The CSS Properties

  • Don't use the !important keyword to override your style. Use specificity to override any declarations. You can use !important keyword in exceptional situations, but not all the time.

  • Don't omit your text styles. The text will give you content values like width and height for your layout. Check the design file in figma and be sure to give all of the font styles to your content.

  • Your solution should look as much the same as the design as possible. You can check your solution and fix some major mistakes.

  • As an advanced recommendation, you can try to solve the challenge again and again based on good comments and good implementations. This will improve your coding skills more than you think.

  I hope these will help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  1

  ---

  

  Furkan Y.•80

  @frkanyilmaz2Posted over 1 year ago

  @adonmez04 Thanks for the valuable information.

  1