/    Sign up×
Community /Pin to ProfileBookmark

CSS and jQuery

Copy linkTweet thisAlerts:
May 23.2019

Hi ,
I have this responsive grid in CSS, The problem is that for some reason it has a margin on left and right on bigger screen sizes . And the children also have a padding, I think, at the bottom , you can see it at the even child.
I’ve also written in jQuery a function to add a class to the nav-links on scrolling but it doesn’t work. I think the code is correct.

Here is the CodePen: https://codepen.io/raul-rogojan/pen/LoOoVm?editors=0100

to post a comment
CSS

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogMay 23.2019 — [[58],[2,8,52]]
Copy linkTweet thisAlerts:
@SempervivumMay 23.2019 — Regarding the CSS issue: You have applied max-width: 1330px; to body. This causes the remaining space.
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @Sempervivum#1603976 ok thank! But how can I add a max-width for screen that are really large ?
Copy linkTweet thisAlerts:
@SempervivumMay 23.2019 — When you add a max-width the result always will be that there is a remaining space. What do you want to achieve on very large screens?
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @Sempervivum#1603981 I want the site/page to not be 100% of the screen as i'll have to optimize the site for that resolution and I don't have a large screen to do it , I saw a lot of sites that are not 100% width on large monitors and I figure that the way they do it is by adding a max-width on the body.
Copy linkTweet thisAlerts:
@SempervivumMay 23.2019 —  I saw a lot of sites that are not 100% width on large monitors and I figure that the way they do it is by adding a max-width on the body.[/quote]That's true but then the remaining space has to be accepted.
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @Sempervivum#1603983 Ok Thank you ! And can you please take a look on why my NavScroll doesn't work ?
Copy linkTweet thisAlerts:
@SempervivumMay 23.2019 — Yes, I'm going to look into ...
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @Sempervivum#1603987 Thank you !
Copy linkTweet thisAlerts:
@SempervivumMay 23.2019 — The dots were missing in the selector:
$(window).on('scroll', function () {
if ($(window).scrollTop()) {
$('.nav-links').addClass('nav-scroll');
}
else {
$('.nav-links').removeClass('nav-scroll');
}
});
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @Sempervivum#1603989 still not working... I tried that
Copy linkTweet thisAlerts:
@SempervivumMay 23.2019 — For me it works in your codepen:

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-05-23/1558628835-514079-raul-nav-scroll.png]

The background color switches to red when scrolling down.
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @Sempervivum#1603991 ooo , I think I know what is the problem xd .
Copy linkTweet thisAlerts:
@codyhillauthorMay 23.2019 — @RaulRogojan#1603992 fixed it ! Thank you xd . I fell stupid now...
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...