Byron

Latest comments

• 

  DanielK•440

  @DanK1368Submitted almost 3 years ago

  

  Responsive Dropdown Navigation using REACT & Styled Components

  #react#styled-components

  3

  60
  

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  @DanK1368 Hia mate.

  Try position: fixed; instead of position: absolute;, to fix the scrolling issue.

  @media screen and (max-width: 670px) {
      .ggprRt {
          /* position: absolute; */
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.5);
          transform: translateX(110%);
          opacity: 0;
      }
  }
  

  Marked as helpful

  0
• 

  Chillidot•40

  @ChillidotSubmitted almost 3 years ago

  

  Interactive rating component mixing CSS grid and flexbox

  1

  30
  

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Hi @Chillidot

  If you remove the height: auto; from the your style.css below, that should fix it in safari!

  /** Circle **/
  svg{
      max-width: 100%;
      /* height: auto; */
  }
  

  Hope that helps!

  Marked as helpful

  1
• 

  Ujwal Vinay•150

  @ujwalvinaySubmitted almost 3 years ago

  

  NFT preview card component

  1

  40
  

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Hi @ujwalvinay

  You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:

  <div class="img-wrapper">
      <img src="images/image-equilibrium.jpg" alt="image" id="banner">
  </div>
  

  .img-wrapper {
      position: relative;
  }
  
  .img-wrapper::before {
      content: '';
      background: url('../images/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
      display: block;
      border-radius: 1.2rem;
      position: absolute;
      top: 0;
      right: 5%;
      bottom: 0;
      left: 5%;
      z-index: 100;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.3s, opacity 0.3s;
  }
  
  .img-wrapper:hover::before {
      visibility: visible;
      opacity: 1;
  }
  

  Hope that helps! 👍

  Marked as helpful

  2
• 

  Miguel Ruiz•20

  @MikeAngel2Submitted almost 3 years ago

  

  Responsive Webpage, using basic Jquery and SASS

  #jquery#sass/scss

  2

  40
  

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Hi @MikeAngel2

  You should be able to center the second card by updating your index.js to set display flex instead of block.

  $(".Thanks").css('display','flex');
  

  This bit of CSS should help to center the text on the second card as well

  .Thanks {
      align-items: center;
      text-align: center;
  }
  

  Hope that helps!

  Marked as helpful

  2
• 

  Abrosss•440

  @AbrosssSubmitted about 3 years ago

  

  Random advice API

  2

  60
  

  Byron•2,290

  @byronbyronPosted about 3 years ago

  @Abrosss Looks good!

  Your question is probably one for whoever designed it. I went with a fixed width, but I don't think it matters too much.

  Few html/accessibility issues:

  Your <section class="page"></section> element is probably better off being a <main class="page"></main> (Document should have one main landmark)

  Also need a <h1> element somewhere inside your <section class="container"> (Page should contain a level-one heading)

  Marked as helpful

  2
• 

  Ganesh•280

  @Ganesh-RathorSubmitted about 3 years ago

  

  Interactive pricing component using flex css js

  #accessibility

  1

  30
  

  Byron•2,290

  @byronbyronPosted about 3 years ago

  @Ganesh-Rathor To style range input on chrome/brave (webkit) you can use:

  input[type=range]::-webkit-slider-runnable-track {}
  input[type=range]::-webkit-slider-thumb {}
  

  Marked as helpful

  0