Return to previous page

How to add spacing between blog post and the header?

This topic has 12 replies, 2 voices, and was last updated 7 months, 3 weeks ago ago by Tony Rodriguez

vidomarketing

Participant

September 7, 2023 at 08:14

Hi,

I am facing issue with spacing between blog post and header. Blog post is overlapping with the site logo now. I attached the site details in private area, thanks!

Please, contact administrator
for this information.

#366829 Copied Theme version: 9.1.12

11 Answers

Tony Rodriguez

Support staff

September 7, 2023 at 08:25

Hello, @vidomarketing,

Thank you for contacting us and for using XStore.

We are pleased to inform you that your issue has been resolved. We kindly request you revisit your site after clearing your browser cache.

We have deactivated the Header Overlap & Transparent option located under Xstore > Theme Options > Header Builder > Multiple Headers > Edit post header and published it. This action has successfully resolved your issue.

Please refer to the attached image for further clarification.

https://postimg.cc/34jCzTqF

https://postimg.cc/dLs4Phwk

https://postimg.cc/fkfkSLXv

Best Regards,
8Theme’s Team

#366831 Copied

vidomarketing

Participant

September 7, 2023 at 10:08

Thanks!

Btw how do i change the blog post width? or make it full screen like the pages?

#366853 Copied

Tony Rodriguez

Support staff

September 7, 2023 at 11:14

Hello, @vidomarketing,

Should you desire to adjust your blog single post to full-screen width, kindly follow these steps: Navigate to XStore > Theme Options > Blog > Single Post. Here, you can choose the ‘Layout Blog Single Post’ option. After making your selection, please ensure to publish it.

For your convenience, we have attached an image for reference.
https://postimg.cc/K3M2pw1F

Best Regards,
8Theme’s Team

#366859 Copied

vidomarketing

Participant

September 14, 2023 at 03:06

Hi thanks for the reply, the client actually want to style it to full screen with margin left and right @ 30px only.

I tried to add css but it doesnt work for me, maybe my css is wrong, can u help me by giving me the correct css?

Please contact administrator
for this information.

#367422 Copied
Tony Rodriguez

Support staff

September 14, 2023 at 06:22
Hello, @vidomarketing,

To accomplish your desired outcome, kindly follow the steps below:

1. Go to Xstore.
2. Click on Theme Options.
3. Select Theme Custom CSS.
4. Choose Global CSS.

After completing these steps, please clear your browser cache and revisit your site.

Please ensure that the following code is present:
```
@media(min-width:1200px){
.single-post .page-wrapper .container {
    margin-left: 30px !important;
    margin-right: 30px !important;
    max-width: 96% !important;
}
}
```
The final result should resemble the image provided in this link: https://postimg.cc/tYQt4Ndr

Best Regards,
8Theme’s Team
#367430 Copied
vidomarketing

Participant

September 14, 2023 at 07:21

Thanks it works!!

One last request, how do i edit the blog title font size? I check the typography under headings, it only has font family and variant, i dont see any option to change the heading font size?

Can u please help?

#367434 Copied

Tony Rodriguez

Support staff

September 14, 2023 at 08:09

Hello, @vidomarketing,

We kindly request you to provide the URL of the page and a screenshot of the title whose size you wish to alter. This will enable us to examine the issue and offer a suitable solution.

Please upload your screenshot to the following site: https://postimages.org/ and share the URL with us here.

Best Regards,
8Theme’s Team

#367446 Copied

vidomarketing

Participant

September 18, 2023 at 10:00

hi i attached the blog urls in the private area, thanks!

Please contact administrator
for this information.

#367736 Copied
Tony Rodriguez

Support staff

September 18, 2023 at 11:42
Hello, @vidomarketing,

We appreciate your request for the URL of the page.

To modify the font-size of your blog title, kindly follow the steps below:

1. Navigate to Xstore > Theme Options > Theme Custom CSS > Global CSS.
2. Copy and paste the following CSS code:
```
.blog-post .post-heading h2 a {
    font-size: 15px !important;
}
```
Please note that you can adjust the ‘font-size’ value to suit your preference.

We trust that this will resolve your issue.

Best Regards,
8Theme’s Team.
#367740 Copied
vidomarketing

Participant

September 20, 2023 at 12:39

hi, how do i adjust the single blog post margin on mobile version to 5px on margin left and right?

#368001 Copied
Tony Rodriguez

Support staff

September 20, 2023 at 13:28
Hello, @vidomarketing,

Upon reviewing your single post page, we noticed that you have already set a 40px padding to the left and right of your content for the desktop version. However, this setting also applies to the mobile version. Therefore, if you simply set the margin to 5px on the left and right for the mobile version, there will be a 25px gap on both sides.

To rectify this, we have removed the padding from the left and right on the mobile version of the single post page. This was achieved by adding the Custom CSS code provided below to your site under Xstore >> Theme Options >> Theme Custom CSS >> Global CSS: https://imgur.com/NSGYYny

Here is how your site appears on the mobile version to us: https://postimg.cc/34hWwpRN
```
@media(max-width: 767px){
.single-post section.elementor-section.elementor-top-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
```
Best Regards,
8Theme’s Team
#368009 Copied
Tagged: blog post spacing, header adjustment wordpress, woocommerce blog setup, woocommerce themes customization, wordpress blog formatting, wordpress spacing
Viewing 12 results - 1 through 12 (of 12 total)