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

Home Forums Support Full width of div.entry-content on frontpage only

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1193485
    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

    #1193592
    David
    Staff
    Customer Support

    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

    #1193923
    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

    #1193930
    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

    #1193934
    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

    #1193942
    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

    #1193961
    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?

    #1193977
    David
    Staff
    Customer Support

    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.

    #1193990
    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

    #1194135
    David
    Staff
    Customer Support

    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.

    #1194172
    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…

    #1194300
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1194409
    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

    #1194465
    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?

    #1194554
    David
    Staff
    Customer Support

    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.

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