Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1210447

    I recently installed some CSS to make full width images work with Gutenberg Blocks: https://kriesi.at/support/topic/full-width-image-blocks-with-gutenberg-blocks/#post-1210149

    Now its seems like our blog doesn’t have any margin space. Can you please help? Thank you!

    #1210505

    Hey nicolechanphoto,

    I see. Add this to quick css:

    .template-blog.template-single-blog .entry-content{
    padding:0 50px!important;
    }

    Best regards,
    Jordan Shannon

    #1210578

    Cool. That works!

    Can you also tell me how to do it for pages, as well?

    #1211259

    Hi,

    Add this to quick css:

    .page .entry-content{
    padding:0 50px!important;
    }

    Best regards,
    Jordan Shannon

    #1211299

    That seems to interview with the full width images, and makes them no longer full width.

    I already have the below in the quick css based on another thread to make the full width images

    .page .container_wrap .container{
    padding:0px!important;
    }

    .page .container_wrap .container .wp-block-columns{
    padding:0 50px!important;
    }

    #1211300

    Hi,

    This is more specific:

    .page .entry-content p,
    .page .entry-content h2,
    .page .entry-content .wp-block-table.is-style-regular{
    padding:0 50px!important;
    }

    Best regards,
    Jordan Shannon

    #1211430

    Great! It looks good on desktop… Two other issues came up t hought
    1) It looks extremely squished on mobile.
    2) The footer at the very bottom still does not have any margin spacing.

    Here’s what I have in total:

    .responsive .container.template-blog.template-single-blog{
    max-width: 100%!important;
    padding-left: 50px!important;
    padding-right: 50px!important;
    }

    .template-blog.template-single-blog .entry-content{
    padding:0 200px!important;
    }

    .page .container_wrap .container{
    padding:0px!important;
    }

    .page .container_wrap .container .wp-block-columns{
    padding:0 200px!important;
    }

    .page .entry-content p,
    .page .entry-content h2,
    .page .entry-content h3,
    .page .entry-content .wp-block-table.is-style-regular{
    padding:25 50px!important;
    }

    #1211986

    Hi,

    Add this for mobile:

    @media only screen and (max-width: 767px)  {
    .page .container_wrap .container .wp-block-columns{
        padding: 0 0px!important;
    }}

    Best regards,
    Jordan Shannon

    #1212352

    Hi Jordan,
    That seemed to work for the first half of the page, but not for the bottom half of the page on mobile.

    #1212359

    Hi,

    So for the tables, the way they are formatted would need to be changed to fit a mobile layout. This is possible, but require another table to be made specifically for mobile, and then hidden on desktop.

    Best regards,
    Jordan Shannon

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.