Grant Posts - Answer Overflow

Grant

Explore posts from servers

•Created by Grant on 11/6/2024 in #front-end

Text that fills the width of a container

Hello, I am trying to write some SCSS to control the size of some text. The text needs to fill the width of the container but maintain the correct proportions on different viewports. I thought I might be able to achieve this with a container query. Currently I have…

.container {
  container-type: inline-size;

  h1 {
    white-space: nowrap;
    font-size: 7.75cqi;
  }
}

.container {
  container-type: inline-size;

  h1 {
    white-space: nowrap;
    font-size: 7.75cqi;
  }
}

This kind of works, in that if the text length doesn't change, it does scale. The problem comes with dynamic text, if there are more charters as an example, then the h1 will overflow the container. Thanks in advance

4 replies

KPCKevin Powell - Community

•Created by Grant on 2/23/2024 in #front-end

Strike line continuing through text regardless of length…

8 replies

KPCKevin Powell - Community

•Created by Grant on 1/18/2024 in #front-end

text-decoration-line: line-through and pseudo not quite right

I am trying to style the strikethrough of some text, and neither quite works as I want.

    text-decoration-line: line-through;
    text-decoration-thickness: 24px;
    text-decoration-color: colour.$yellow;

    text-decoration-line: line-through;
    text-decoration-thickness: 24px;
    text-decoration-color: colour.$yellow;

The above gets quite close, however I wish for the line to overhang the text by about 5px each side. Don't believe this is possible?

   .strikethrough::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5px;
     right: -5px;
     border-top: 24px solid currentColor;
     transform: translateY(-50%);
   }

   .strikethrough::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5px;
     right: -5px;
     border-top: 24px solid currentColor;
     transform: translateY(-50%);
   }

The above doesn't work as my text breaks onto two lines, which it should as that's what the design dictates. The pseudo line is in-between both lines and hence I do not get the desired effect. This pen hopefully demonstrates the issue… https://codepen.io/grantsmith/pen/eYXWgOr

1 replies

KPCKevin Powell - Community

•Created by Grant on 1/8/2024 in #front-end

Font height causing uneven buttons…

6 replies

KPCKevin Powell - Community

•Created by Grant on 10/19/2023 in #front-end

Two column layout using four divs

8 replies

KPCKevin Powell - Community

•Created by Grant on 7/20/2023 in #front-end

Is there a better way of positioning this graphic 🤔

3 replies

KPCKevin Powell - Community

•Created by Grant on 3/28/2023 in #front-end

SCSS function

I have inherited some code which includes a function that looks like it should work to me.

// rem units
@function rem($px, $base: $base) {
    @return math.div($px, $base) * 1rem;
}

// rem units
@function rem($px, $base: $base) {
    @return math.div($px, $base) * 1rem;
}

Whilst trying to process this with node-sass as its an old project. I get this error message returned.

"message": "Invalid CSS after \"...   @return math\": expected expression (e.g. 1px, bold), was \".div($px, $base) * \"",
  "formatted": "Error: Invalid CSS after \"...   @return math\": expected expression (e.g. 1px, bold), was \".div($px, $base) * \"\n        on line 43 of src/scss/utils/_utils.scss\n        from line 3 of src/scss/screen.scss\n>>     @return math.div($px, $base) * 1rem;\n\n   ----------------^\n"

"message": "Invalid CSS after \"...   @return math\": expected expression (e.g. 1px, bold), was \".div($px, $base) * \"",
  "formatted": "Error: Invalid CSS after \"...   @return math\": expected expression (e.g. 1px, bold), was \".div($px, $base) * \"\n        on line 43 of src/scss/utils/_utils.scss\n        from line 3 of src/scss/screen.scss\n>>     @return math.div($px, $base) * 1rem;\n\n   ----------------^\n"

6 replies

KPCKevin Powell - Community

•Created by Grant on 3/1/2023 in #front-end

How to make a fancy border

4 replies

KPCKevin Powell - Community

•Created by Grant on 2/22/2023 in #front-end

Print CSS only showing the first page

Hello, I am trying to write some SCSS for printing the screen in A4 landscape that retains a lot of the on screen styles. I kind of have this working with the following SCSS. However, whilst print preview shows there are 20+ pages, the first page is just repeated over and over. i.e. page two is never shown. I'm afraid I can not attached the pdf as it contains commercially sensitive information, I hoping the above explains the situation sufficiently. Here is my current SCSS.

@media print {
  @import './table.scss';

  @page {
    size: A4 landscape;
    -webkit-print-color-adjust: exact;
  }

  * {
    visibility: hidden;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    font-size: 10pt !important;
  }

  #comparetray * {
    visibility: visible;

    .headers,
    .navigation,
    button.close {
      display: none !important;
    }
  }
}

@media print {
  @import './table.scss';

  @page {
    size: A4 landscape;
    -webkit-print-color-adjust: exact;
  }

  * {
    visibility: hidden;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    font-size: 10pt !important;
  }

  #comparetray * {
    visibility: visible;

    .headers,
    .navigation,
    button.close {
      display: none !important;
    }
  }
}

2 replies

KPCKevin Powell - Community

•Created by Grant on 2/7/2023 in #front-end

Centering columns in CSS Grid

Hello, Here is what am trying to achieve in CSS Grid. Columns are 50% of the container minus gap. Odd columns center to the container. On mobile/small screen, columns become full width (only mentioning as I think this can be achieved without a media query?) I have mocked this up (badly I might add) in flexbox at this url. https://codepen.io/grantsmith/pen/BaPEMqB I have no errors as such, just can not figure out how to achieve the above in Grid.

8 replies

Gaming

Programming