/    Sign up×
Community /Pin to ProfileBookmark

Webpage header won’t stay 100%

Copy linkTweet thisAlerts:
Nov 23.2022

Hello,

Could anyone take a look at the following page and let me know why the header element won’t take the entire width of the screen when I decrease the width (below 360px)? Also, the p element isn’t staying centered, although Flex-center is applied to it.

I’ve tried several fixes from the internet, but without success. I’m guessing it has something to do with the img and the nav inside that header, or maybe the fact I’m using SASS not correctly??? I couldn’t figure it out..

(https://grand-souffle-db9b3b.netlify.app/)

Thanks for the help!

Kr,

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumNov 23.2022 — There is an easy fix for this issue: Apply `overflow: hidden;</C> to <C>section`.

However this would require to go the extra mile and make the image responsive so that it shrinks when the viewport is very narrow.
Copy linkTweet thisAlerts:
@polygonStormauthorNov 25.2022 — @Sempervivum#1648663 Great fix, thanks!

However, a question: when I make the image responsive, and discard overflow: hidden; the problem seems to be solved as well. Could this be coincidence, or is it required to have both overflow: hidden; + responsive img?

Thanks already for your insight.
Copy linkTweet thisAlerts:
@SempervivumNov 26.2022 — Yes, when the image is responsive `overflow: hidden` is obsolete.
×

Success!

Help @polygonStorm 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.23,
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,
)...