-
AuthorPosts
-
May 6, 2020 at 7:31 pm #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!
May 6, 2020 at 10:24 pm #1210505Hey nicolechanphoto,
I see. Add this to quick css:
.template-blog.template-single-blog .entry-content{ padding:0 50px!important; }
Best regards,
Jordan ShannonMay 7, 2020 at 1:43 am #1210578Cool. That works!
Can you also tell me how to do it for pages, as well?
May 8, 2020 at 10:18 pm #1211259Hi,
Add this to quick css:
.page .entry-content{ padding:0 50px!important; }
Best regards,
Jordan ShannonMay 8, 2020 at 11:34 pm #1211299That 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;
}May 8, 2020 at 11:45 pm #1211300Hi,
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 ShannonMay 9, 2020 at 5:00 pm #1211430Great! 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;
}May 12, 2020 at 4:46 am #1211986Hi,
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 ShannonMay 12, 2020 at 8:42 pm #1212352Hi Jordan,
That seemed to work for the first half of the page, but not for the bottom half of the page on mobile.May 12, 2020 at 8:56 pm #1212359Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.