Global CSS
Answered
Japanese flying squid posted this in #help-forum
Japanese flying squidOP
so im trying to get rid of the small white margin or border around my page (im new to nextjs) so i have a following questions :
1. when i try to add
it gives me following error : [Syntax error: Selector "*" is not pure (pure selectors must contain at least one local class or id)]
whereas be default when you create a next project its global.css has styles on tags and works fine without any errors
2. i tried cathing the html by giving the html tag class name "catchhtml"
this does what i expect it to do but i believe this is not the right approach and it creates a horizontal scroll
# other proper approch to achive that expected behaviour shown in the second image would be appreciated thank you
1. when i try to add
global.css
*{
margin : 0;
padding : 0;
}it gives me following error : [Syntax error: Selector "*" is not pure (pure selectors must contain at least one local class or id)]
whereas be default when you create a next project its global.css has styles on tags and works fine without any errors
2. i tried cathing the html by giving the html tag class name "catchhtml"
global.css
.catchHtml {
margin: -8px;
padding: 0;
}this does what i expect it to do but i believe this is not the right approach and it creates a horizontal scroll
# other proper approch to achive that expected behaviour shown in the second image would be appreciated thank you
68 Replies
u have to apply the rules to your body, this what i always do:
html,
body {
padding: 0;
margin: 0;
}Japanese flying squidOP
tried that got the following error :
Syntax error: Selector "html,
body" is not pure (pure selectors must contain at least one local class or id)
16 | }
17 |
> 18 | html,
| ^
19 | body {
20 | margin: -8px;Japanese flying squidOP
global.css file ill try with globals.css file
yeah that doesnt matter
and you are importing it in layout?
Japanese flying squidOP
eys
yes
here is the content of my global.css
i removed the default css styles
html,
body {
margin: -8px;
padding: 0;
}
.page_wrapper :root {
--white: #ffffff;
--dim-blue: #e1eafc;
--blue: #244e97;
}
.page_wrapper {
box-sizing: border-box;
font-family: Inter, sans-serif;
font-feature-settings:
"liga" 1,
"calt" 1; /* fix for Chrome */
font-size: 130%;
list-style: none;
text-decoration: none;
overflow: hidden;
}i removed the default css styles
set margin to 0
Japanese flying squidOP
it doesnt do anything
are u sure nothing else overrides it
Japanese flying squidOP
im not sure but ill try something
only thing i did was completely remove the conent of global.css file and wrote my own css init
and the behaviour that previously tag style was working and now its now is weird
add a !important tag
behind the values
Japanese flying squidOP
this is my next.config.mjs
if this helps
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;if this helps
and also check the element styles trough the console
has nothing to do with it
do u have anydesk?
ill fix it for u
or try to find the issue
Japanese flying squidOP
im on sway arch linux so no
i can host this on github real quick
will that work?
send me your codebase
Japanese flying squidOP
give me minute
and thankyou for helping
Japanese flying squidOP
wait
wrong repo
here i forget to commit some changes
one sec
Japanese flying squidOP
sure
Japanese flying squidOP
is the error because of this
yes
@Japanese flying squid check pull request
Japanese flying squidOP
sure
did this resolve your issue
?
Japanese flying squidOP
no i get the same error
did u refetch from git
and pull
Japanese flying squidOP
yes is it working for you???
yes
whats the error?
Japanese flying squidOP
Syntax error: Selector "html,
body" is not pure (pure selectors must contain at least one local class or id)
2 | body {
3 | margin: 0;
body" is not pure (pure selectors must contain at least one local class or id)
1 | html,| ^
2 | body {
3 | margin: 0;
same
on /home?
Japanese flying squidOP
everywhere
wait
Japanese flying squidOP
hey thankyou so much its working
i misunderstood the css modules
Japanese flying squidOP
hey the issue was me importing the global css two times
removing a single import is also working
👍
@Japanese flying squid u can mark my answer as solution btw
Japanese flying squidOP
sure