[Resolved] Full width of div.entry-content on frontpage only

[Carsten]

Hi there, I would like to have my frontpage without any margin on top, left, bottom, right, especially on mobile I think this looks better.

View post on imgur.com

When I change the width to 100% only the right margin is gone:

View post on imgur.com

1. How do I achieve this?

2. Is it possible to have the top section of the element as background, (the header background should then be transparent), for the header navigation, for a more integrated full screen edge to edge app look?

Regards

[David]

Hi there,

1. You can use the Page Builder Container set to Full Width:

https://docs.generatepress.com/article/page-builder-container/

2. You can use a Header Element:

https://docs.generatepress.com/article/header-element-overview/

You will only need to enable the Merge with Content option:

https://docs.generatepress.com/article/header-element-overview/#merge-with-content

[Carsten]

1.

I have set all padding to zero.

I want the zero padding only on my front page, which class should I use for front page only?

@media (max-width: 768px) {
div.entry-content {
    padding: 0px 0px 0px 0px;
    background: #ffffff;
}
}

Thanks

[Carsten]

Can I remove the inside header padding, the pink padding, in the customizer, or do I have to remove this with CSS?

.inside-header {
    padding: 10px 0px 10px 0px;
}

View post on imgur.com

[Carsten]

When I added a widget to the header, the top padding disappeared.

Why is my back button not displayed in the header?

View post on imgur.com

[Carsten]

And how do I remove the white space between the header and the page content?, it is not part of the Elementor element

View post on imgur.com

[Carsten]

Hi, sorry for the many post, the thing is, that I do not think the header and navigation behave as you would expect from the settings.

Here are some examples

Navigation right, but the navigation stays left.

View post on imgur.com

Navigation alignment center, but stays left

View post on imgur.com

Navigation alignment right, but stays left.

View post on imgur.com

Navigation before centered, stays left

View post on imgur.com

What am I missing here?

[David]

1. Remove Padding from Home entry-content only:

@media (max-width: 768px) {
    body.home .entry-content {
        padding: 0px 0px 0px 0px;
        background: #ffffff;
    }
}

Rest of queries – do you have the Customizer > Layout > Header –> Navigation as Header enabled ? If so the Inside Header padding does not apply and neither will those presets.

[Carsten]

Thanks for the code, regarding padding.

I have had the Navigation as Header enabled, but I thought I would like to give the normal navigation in header a try. But why can’t I set the Inside Header padding, and why is it pink…

By goal is, as described in another topic, to have my menu and back button widget left right in one line and without the use for a top bar.

View post on imgur.com

[David]

The hook element would allow you to add your back button HTML inside the same container as the Navigation:

https://docs.generatepress.com/article/hooks-element-overview/

The inside_navigation hook will apply to desktop and mobile – as long as you do not have the mobile header enabled.

Once it is in the container we can provide some CSS to align the elements. We would need to see the site to help with that.

[Carsten]

Regarding

1. Remove Padding from Home entry-content only:

@media (max-width: 768px) {
    body.home .entry-content {
        padding: 0px 0px 0px 0px;
        background: #ffffff;
    }
}

The code only works on the body.home with a div tag, body.home div.entry-content
but then it dosen’t work on the rest of the pages…

[Tom]

Hi there,

Are you wanting to apply that CSS to the entire site? If so, just ditch the body.home part.

[Carsten]

Are you wanting to apply that CSS to the entire site? If so, just ditch the body.home part.

No, just on the frontpage.

I can see that hooks is a very powerful tool, and with that, you can achieve anything on your web site, and is just the tool I need. I just wouldn’t know what to put in the field for e.g the back button plugin?

I can see this considered basic knowledge, and really would like to learn this technique, so are there any tutorials on this part, what script you should use?

Best
Carsten

[Carsten]

The use of hooks is very very interesting, does this mean that I can move items, div#item-meta, from my BuddyPress div#item-header to after the content using the generate_after_main_content hook?

[David]

Is this css ( linked here ) now working? Let us know so we can close of this requirement.

I would suggest raising a separate topic regarding hooks.

[Author]

Posts