[Resolved] Spacious import into existing site

Home Forums Support Spacious import into existing site

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #1231676
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1231689
    Stephen

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

    #1231702
    Leo
    Staff
    Customer Support

    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.

    #1231710
    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??

    #1232848
    Leo
    Staff
    Customer Support

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

    body {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    #1232926
    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.

    #1233292
    Leo
    Staff
    Customer Support
    #1233370
    Stephen

    Yes, all gone.

    #1233404
    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

    #1234154
    Leo
    Staff
    Customer Support

    That looks really good on my end as well!

    #1234182
    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…

    #1234717
    Leo
    Staff
    Customer Support

    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/

    #1234736
    Stephen

    Thanks for all your help 🙂

    #1235414
    Leo
    Staff
    Customer Support
Viewing 14 posts - 16 through 29 (of 29 total)
  • You must be logged in to reply to this topic.