[Resolved] Spacious import into existing site

[Leo]

Actually let’s go with another method.

Try changing the CSS back to this:

.slide-opened .main-navigation.offside {
    transform: initial;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 100 !important;
}

Then edit this block:

body {
	margin: 5%; /* Space around site. */
	position: relative;
}

To this:

@media (min-width: 769px) {
    body {
	margin: 5% 30.5%; /* Space around site. */
	position: relative;
    }
}

[Stephen]

Done.
The menu is now in the right place relatively but the body is really narrow.

[Leo]

Ahh I think you are on a pretty small screen.

This is what I’m seeing:
https://www.screencast.com/t/VDF8s1hhfek

The layout you are after is a bit complicated to make it responsive so we will need to write multiple media query.

Try editing this:

@media (min-width: 769px) {
    body {
	margin: 5% 30.5%; /* Space around site. */
	position: relative;
    }
}

To this:

@media (min-width: 1025px) {
    body {
	margin: 5% 30.5%; /* Space around site. */
	position: relative;
    }
}

Then add this:

@media (min-width: 769px) and (max-width: 1024px) {
    body {
	margin: 5% 20%; /* Space around site. */
    }
}

Try tweaking the number 30.5% and 20% a bit and see if you can make it work.

[Stephen]

Yes, a 13″ laptop; 1280×800

I just thought, it’s only the content space I want to restrict to 700px (so the text lines are no more than 700px wide), it doesn’t really matter if the overall container is 2000px wide as in the original settings.

Would that make it easier? To leave the overall width as it was originally with the menu sliding out from the original position but have the text “column” 700px wide?

CSS is not my language 🙂 Hope what I’ve written is clear.

Edit: it might look a bit strange though with the menu and search icons so far away??

[Leo]

Can you try setting the container width back to 2000 and try this CSS?

body {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

[Stephen]

Done.
If I leave the @media blocks in there is no apparent change.

Taking them out pushes the “body” to the top of the screen but its appearance is good.

The menu opens at the far left of my screen. That’s what you can see now.

[Leo]

Can you remove all the CSS here?
https://generatepress.com/forums/topic/spacious-import-into-existing-site/page/2/#post-1231702

[Stephen]

Yes, all gone.

[Stephen]

Beginner’s luck, perhaps…

body {
max-width: 700px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
}

and

.slide-opened .main-navigation.offside {
transform: initial;
position: absolute;
top: 50px;
left: auto;
height: 100%;
z-index: 100 !important;

opens the slide-out in the right place on my screen (it seems the two “auto”s for left margin and left position do it as well as the top-margin and top position set to 50px.

Don’t know how responsive it might be

[Leo]

That looks really good on my end as well!

[Stephen]

Great!

I have a follow-up question.

If you look at the Spacious Preview it looks as though the body container is set to 2000 with the menu and search buttons in the top corners but all the text is narrower. How do you do that?

Thanks for bearing with me…

[Leo]

Spacious is using this CSS:

.no-sidebar .inside-article > *, 
.no-sidebar #comments,
.no-sidebar .paging-navigation {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

I wonder if you can just increase the left and right padding:
https://docs.generatepress.com/article/content-padding/

[Stephen]

Thanks for all your help 🙂

[Leo]

No problem 🙂

[Author]

Posts