When using Prettier to format code in a scss file, it is formatting this specific part:
@font-face {
font-family: 'Encode Sans Condensed';
src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf')
format('truetype');
font-weight: 200;
font-style: normal;
}
An error is occurring that says "Expected newline after ':' with a multi-line declaration." What adjustments can be made in the .prettierrc.json file to resolve this issue?
The declaration spanning multiple lines is present on the src property. It appears that prettier prefers the following format:
@font-face {
font-family: 'Encode Sans Condensed';
src:
url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf')
format('truetype');
font-weight: 200;
font-style: normal;
}
Alternatively, you can opt for this structure:
@font-face {
font-family: 'Encode Sans Condensed';
src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
It is possible that your linter's formatting conflicts with prettier's settings. For example, if using stylelint:
npm install --save-dev stylelint-config-prettierAfterwards, add stylelint-config-prettier to the "extends" array in your .stylelintrc.* file. Ensure it is placed last to take precedence over other configurations.
{
"extends": [
// other configs ...
"stylelint-config-prettier"
]
}
Source: https://github.com/prettier/stylelint-config-prettier
I have included a font awesome library in the header using the following code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> However, when I try to display an ic ...
I am working with multiple straight lines and have specified the stroke-width as 4. However, when I attempt to rotate them, the lines appear thicker than expected. Additionally, setting a negative value, such as <path d="M0 -10 20 0" stroke-width="4" st ...
Recently, I encountered an issue with a pseudo-element: input[type=radio].selected::before Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagi ...
When checking my website on Safari using an iPad or iPhone, I noticed that I can touch and drag left to right, causing the entire window to move and reveal the grey background behind it. Here is a link to my page. However, when visiting other websites, no ...
Within my UI, I have a select field that, on change, populates corresponding data in a div with nested ul and li elements. What I am attempting to achieve is to convert the selected items within the list (which include checkboxes) into an object of arrays ...
After creating two JavaScript functions, I am eager to utilize both of them upon pressing the submit button on my form. The first function is already integrated into the submit button and activates a paragraph display upon submission. Now, I intend to sh ...
After installing the flat-responsive theme, I noticed that it includes Font Awesome CSS. Additionally, there is a reference to this in the functions.php file: wp_enqueue_style( 'flat_responsive_font-awesome', get_template_directory_uri() . &apos ...
I have a form row with two inputs. There is a requirement to show ⚠️ (warning emoji) next to the second input in the row, based on the input number. However, because of how flexbox behaves, the input size gets reduced... How can I maintain the input s ...
Upon clicking the subscribe button and successfully subscribing, I want to display an unsubscribe option in my code. To achieve this, I have created two separate divs for each button, thinking that we could toggle between them. <div id ="subscribe_ever ...
I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...
Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...
Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigat ...
My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations. I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process. Is it poss ...
Can someone help me with centering my container's item? I am struggling to align the third item to the center using display: grid. Previously, I attempted to use flexbox but found it to be less effective for a responsive layout. .projetos { f ...
I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...
My git repository contains around 20GB of data, mainly consisting of JSON/CSV/YAML files. Additionally, there are scattered TypeScript/JavaScript (.ts/.js) files among the data files. As the repository has grown in size, I encounter a significant delay eve ...
My HTML file is linked to a CSS file, but the CSS doesn't seem to load when I use live-server. Interestingly, the CSS works perfectly fine when I directly open the HTML file in a browser. The CSS file is located outside the directory where my HTML fi ...
In my latest project, I decided to customize Bootstrap 5.1.3 using Sass in order to introduce some new color themes to the panels. I quickly realized that customizing Bootstrap 5.1.3 is not as straightforward as it was with Bootstrap 4. After updating my ...
My confusion lies in the fact that this code snippet works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } Whereas this one does not: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I am ...
My row of cards in various sizes looks good on larger screens like this: https://i.sstatic.net/1qF53.png However, on smaller screens, the cards lose their appeal. https://i.sstatic.net/o1NS8.png To improve this, I want to stack the cards so that the ke ...