Menu icon Foundation

My Posts



My Comments

Richie Sun commented on Richie Sun's post almost 5 years

The other strange thing I also found was when I open up the toolkit, the two columns = 1904px. But the .row that its in says 1905. Inspecting the elements ignores the space where the white line shows up.

Also, change my left column from large-2 to large-3 and the second column from large-10 to large-9 fixes the issue. So it seems there's an issues with the combo of 2 and 10 that causes the widths to not equal 100%.

Richie Sun commented on Richie Sun's post almost 5 years

Rafi, I added a new image to the post so you can see the code.

Richie Sun commented on Richie Sun's post almost 5 years

Hi Rafi,

Thanks for the quick reply. Changing my code to max-width still doesn't fix the issue. I am using chrome, but I just checked in safari and it also does the same thing.

Richie Sun commented on ShadowDanser's post about 5 years

Managed to make this work for small query.

@media #{$medium-up} {
  .valign-middle {
      display: table;

      > .columns {
          display: table-cell;
          vertical-align: middle;
      }

      > .columns, > [class*="column"] + [class*="column"]:last-child {
          float: none;
      }
  }  
}

Richie Sun commented on ShadowDanser's post about 5 years

@Matt, Thanks a bunch. This definitely worked perfectly.

Only issue I had was that If I'm trying to center text and view it in smaller browser aka mobile size, it breaks the mobile optimization.

Richie Sun commented on Richie Sun's post about 5 years

Hi Joanne, thanks for the reply. I have emmet installed already.

I might have not been descriptive. If I'm writing html and creating say a div and then I write class, is there a way to be in the class tag and have autocomplete popup with available styles I can use? I'm working in .scss.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Richie Sun's post almost 5 years

The other strange thing I also found was when I open up the toolkit, the two columns = 1904px. But the .row that its in says 1905. Inspecting the elements ignores the space where the white line shows up.

Also, change my left column from large-2 to large-3 and the second column from large-10 to large-9 fixes the issue. So it seems there's an issues with the combo of 2 and 10 that causes the widths to not equal 100%.

You commented on Richie Sun's post almost 5 years

Rafi, I added a new image to the post so you can see the code.

You commented on Richie Sun's post almost 5 years

Hi Rafi,

Thanks for the quick reply. Changing my code to max-width still doesn't fix the issue. I am using chrome, but I just checked in safari and it also does the same thing.

You commented on ShadowDanser's post about 5 years

Managed to make this work for small query.

@media #{$medium-up} {
  .valign-middle {
      display: table;

      > .columns {
          display: table-cell;
          vertical-align: middle;
      }

      > .columns, > [class*="column"] + [class*="column"]:last-child {
          float: none;
      }
  }  
}

You commented on ShadowDanser's post about 5 years

@Matt, Thanks a bunch. This definitely worked perfectly.

Only issue I had was that If I'm trying to center text and view it in smaller browser aka mobile size, it breaks the mobile optimization.

You commented on Richie Sun's post about 5 years

Hi Joanne, thanks for the reply. I have emmet installed already.

I might have not been descriptive. If I'm writing html and creating say a div and then I write class, is there a way to be in the class tag and have autocomplete popup with available styles I can use? I'm working in .scss.

Posts Followed


Following

  • No Content

Followers

  • No Content