site margins

  • Unknown's avatar
    moshekahol · Member ·

    Hi, I would love to change my site margins…
    I wish the first 3 child pages – from the first child phone picture to the third child – with second phone pictures – to stay as they are…
    but down from there to the rest of my site I wnat the margin to be like the red lines I draw in this pictures:

    thanks!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi @moshekahol,

    The CSS you’re requesting is very advanced and goes beyond the scope of support that this forum is truly intended for.

    We’re happy to help you with relatively small/intermediate CSS to tweak a theme’s appearance. Larger and multiple layout changes, however, may warrant a change of theme or assistance from a paid professional. If you do decide to seek professional help for your site, then the following are some good places to start your search:

    Back to your request: The following snippet will increase the width that the content takes up on all pages of your site:

    .entry-hero-wrapper, .hentry-wrapper, .site-content-wrapper, .site-footer-wrapper, .site-header-wrapper, .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .widget-area-wrapper {
    max-width: 100%;
}

    You can experiment with increasing/decreasing the value of max-width.

    You’ll also need to test and view your site across devices of different devices to ensure that the above CSS doesn’t cause any layout issues. (I did some brief initial testing and can’t see any standout issues but this is a relatively large layout change and there may be something that I missed.)

    To limit the pages that the CSS applies to, you can use your browser’s inspector tool (we have guidance on how to do that here) to find the unique ID of the page you don’t wish the changes to apply to. You can then use that ID in your custom CSS to stop the changes from applying to a given page.

    For example, the following would stop the changes from applying to a page with an ID of 3672:

    .page-id-3672 .entry-hero-wrapper, .page-id-3672 .hentry-wrapper, .page-id-3672 .site-content-wrapper, .page-id-3672 .site-footer-wrapper, .page-id-3672 .site-header-wrapper, .page-id-3672 .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .page-id-3672 .widget-area-wrapper {
    max-width: inherit;
}

    Hope that helps point you on the right path.

  • Unknown's avatar
    moshekahol · Member ·

    I see, thanks for explaining Siobhyb, really appreciate the time you took to explain it to me

  • Unknown's avatar
    siobhyb · Member ·

    You’re welcome!

  • Unknown's avatar
    moshekahol · Member ·

    Siobhyb I tried stop changes only from applying to this page, but there seem to be no affect:
    .page-id-1685 .entry-hero-wrapper, .page-id-1685 .hentry-wrapper, .page-id-1685 .site-content-wrapper, .page-id-1685 .site-footer-wrapper, .page-id-1685 .site-header-wrapper, .page-id-1685 .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .page-id-1685 .widget-area-wrapper {
    max-width: inherit;
    }
    am I doing something wrong?

  • Unknown's avatar
    siobhyb · Member ·

    Could you try replacing inherit with 80% (the original value of max-width)?

  • Unknown's avatar
    moshekahol · Member ·

    Hi siobhyb, really thankful for your support
    I tried it: 

    .page-id-1685 .entry-hero-wrapper, .page-id-1685 .hentry-wrapper, .page-id-1685 .site-content-wrapper, .page-id-1685 .site-footer-wrapper, .page-id-1685 .site-header-wrapper, .page-id-1685 .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .page-id-1685 .widget-area-wrapper {
max-width: 80% !important;
}

    still no result

  • Unknown's avatar
    moshekahol · Member ·

    its seems to work as post-1685 

    .post-1685 .entry-hero-wrapper, .post-1685 .hentry-wrapper, .post-1685 .site-content-wrapper, .post-1685 .site-footer-wrapper, .post-1685 .site-header-wrapper, .post-1685 .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .post-1685 .widget-area-wrapper {
	max-width: 80% !important;
}

.entry-hero-wrapper, .hentry-wrapper, .site-content-wrapper, .site-footer-wrapper, .site-header-wrapper, .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .widget-area-wrapper {
    max-width: 100%;
}

    thanks for the support! really thankful to you Siobhyb

  • Unknown's avatar
    moshekahol · Member ·

    Hi Siobhyb im trying not to include the blog page itself: https://kahol.co.il/%D7%94%D7%90%D7%9D-%D7%97%D7%99%D7%99%D7%91-%D7%90%D7%95%D7%AA%D7%9A/%D7%9E%D7%90%D7%9E%D7%A8%D7%99%D7%9D-%D7%97%D7%93%D7%A9%D7%99%D7%9D/

    how can I find it’s page id? its seems diffrent way that what you thought me

  • Unknown's avatar
    moshekahol · Member ·

    Hi again, I used: 

    @media screen and (min-width: 981px) {
 .blog .entry-hero-wrapper,  .blog .hentry-wrapper,  .blog .site-content-wrapper,  .blog .site-footer-wrapper,  .blog .site-header-wrapper,  .blog .site-content-wrapper .has-post-thumbnail .entry-header-wrapper,  .blog .widget-area-wrapper {
	max-width: 80% !important;
}
}

    Im confused about the @media – i wrote 981 because when I played in the emulator on pc mode it was cropped (more than normal – cutting the image on the side) untill I reached this number…
    Am I correct using 981?

    thanks

  • Unknown's avatar
    siobhyb · Member ·

    Hi there,

    You’re right that .blog can be used as the page ID for your site’s posts page. Great work figuring that out!

    The Media Query in your snippet is currently detecting whether a screen size is a 981px or larger. The custom CSS within the Media Query will then only work with screens that are larger than that size.

    If you tested and found that your site looked good with the CSS on screens that were at the very least 981px in width, then you’re absolutely right to use that number. :)

  • The topic ‘site margins’ is closed to new replies.