Section Breaks

emiratesti · Member · Mar 9, 2022 at 10:25 am
Copy link

Add topic to favorites
Hello,

I have made my home page by uploading different posts and I wondering if there was any way to reduce the size of the section breaks between the posts. It seems that each post has a certain height that it is automatically set.

I would also like to know if there is a CSS to make the featured image on the home page not scroll.

Thanks

The blog I need help with is: (visible only to logged in users)
helper-heroponriki · Member · Mar 9, 2022 at 5:25 pm
Copy link
Hi there:

It looks like the site emiratesti.com is not hosted here at WordPress.com. Your site is using the open-source WordPress software (from WordPress.org ) but hosted elsewhere.

We cannot access files or data for sites that are hosted elsewhere, so WordPress.com staff can only assist with sites that are hosted on our servers. But, I can get you pointed in the right direction.

However, since it’s one of our themes, we should be able to help here.

I assume it’s the area(s) highlighted in this screenshot?

If so, it looks like you’ve added other CSS to create those section breaks as the theme demo doesn’t have that: https://piquedemo.wordpress.com/

Can you clarify how you added that? Did you use CSS or did you build the page using the block editor? Once we have that information, we’ll be better able to advise.

Thanks.
emiratesti · Member · Mar 10, 2022 at 10:00 am
Copy link
Hello

I haven’t planned to put in any CSS that would create the section breaks. I did build the page using the block editor but have custom CSS for other things. This is the CSS I have:
img.site-logo.attachment-pique-logo{
max-height: 250px;!important;
max-width: 250px;!important;
}

.pique-panel, .pique-panel:nth-of-type(2n) {
background: rgba(255,255,255, 0);
}
.pique-panel-content {
text-shadow: none;
}

@media only screen and (max-width: 767px) {
img.site-logo.attachment-pique-logo{
max-height: 125px;!important;
max-width: 114px;!important;
}
header#masthead.site-header {
height: 5px !important;;
}
}
}

The homepage is made using several posts rather than one long page. So there isn’t really a section break but that is the default size of the post (https://ibb.co/tmj52k0 – not sure if this works) So I would like to know if there is a way to reduce the actual size of the post as I am not using the full length given.
kokkieh · Staff · Mar 10, 2022 at 10:50 am
Copy link
Hi there,

To prevent the featured image for the homepage content from scrolling, you can use this:
```
/* Prevent panel background image from scrolling */
body:not(.no-background-fixed) .pique-panel-background {
  background-attachment: scroll;
}
```
And to reduce the spacing between panels:
```
/* Reduce space between panels */
div.pique-panel-content {
  padding-top: 0;
  padding-bottom: 0;
}

div.pique-panel-content .entry-content {
  margin-top: 0;
  margin-bottom: 0;
}

div.pique-panel-content footer.entry-footer {
  display: none;
}
```
The remaining space is coming from the dynamic separator blocks you’ve inserted at the top and bottom of each post to create the horizontal lines. That block comes from the Coblocks plugin, and should have a setting where you can control the height of that block from directly in the editor.

No items found.