- This topic has 28 replies, 2 voices, and was last updated 2 years, 1 month ago by
Leo.
-
AuthorPosts
-
April 8, 2020 at 11:31 am #1231676
Leo
StaffCustomer SupportActually 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 8, 2020 at 11:42 am #1231689Stephen
Done.
The menu is now in the right place relatively but the body is really narrow.April 8, 2020 at 11:50 am #1231702Leo
StaffCustomer SupportAhh I think you are on a pretty small screen.
This is what I’m seeing:
https://www.screencast.com/t/VDF8s1hhfekThe 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%
and20%
a bit and see if you can make it work.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 8, 2020 at 11:58 am #1231710Stephen
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??
April 9, 2020 at 9:11 am #1232848Leo
StaffCustomer SupportCan you try setting the container width back to 2000 and try this CSS?
body { max-width: 700px; margin-left: auto; margin-right: auto; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 9, 2020 at 10:13 am #1232926Stephen
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.
April 9, 2020 at 4:21 pm #1233292Leo
StaffCustomer SupportCan you remove all the CSS here?
https://generatepress.com/forums/topic/spacious-import-into-existing-site/page/2/#post-1231702Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 9, 2020 at 6:18 pm #1233370Stephen
Yes, all gone.
April 9, 2020 at 7:31 pm #1233404Stephen
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
April 10, 2020 at 9:00 am #1234154Leo
StaffCustomer SupportThat looks really good on my end as well!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 10, 2020 at 9:24 am #1234182Stephen
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…
April 10, 2020 at 8:52 pm #1234717Leo
StaffCustomer SupportSpacious 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/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 10, 2020 at 9:46 pm #1234736Stephen
Thanks for all your help π
April 11, 2020 at 10:02 am #1235414Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.