Skip to content
This repository has been archived by the owner on Jan 26, 2022. It is now read-only.

Ensure full-width items within post content go full-width #5

Closed
kjellr opened this issue Oct 4, 2021 · 2 comments
Closed

Ensure full-width items within post content go full-width #5

kjellr opened this issue Oct 4, 2021 · 2 comments
Labels
[Type] Bug Something isn't working

Comments

@kjellr
Copy link
Collaborator

kjellr commented Oct 4, 2021

Flagging this issue from #4 (comment) to follow up later:

Due to some left/right padding rules, alignfull items within posts and pages do not actually extend to the full width of the page:

Screen Shot 2021-10-04 at 7 40 10 PM

We should (hopefully) find a way to allow for full-width items to go all the way to the screen edges, while still retaining a similar measure of left/right padding for the header and other non-full-width items.

@kjellr kjellr added the [Type] Bug Something isn't working label Oct 4, 2021
@pattonwebz
Copy link
Member

The most common technique I have seen used to do this is with CSS similar to this:

.alignfull {
	margin: 2rem calc(50% - 50vw);
	max-width: 100vw;
	padding: 1rem 2rem;
	width: 100vw;
}

That has some implications on chrome where it can cause a horizontal scroll bar due to chrome (possibly all webkit browsers) not accounting for the vertical scrollbar when it calculates what 100vw is. I think it's worth exploring if this will be suitable and if the kinds with chrome can be worked out.

@kjellr
Copy link
Collaborator Author

kjellr commented Nov 15, 2021

Closing to consolidate this issue into #234.

@kjellr kjellr closed this as completed Nov 15, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
[Type] Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants