Mobile Header/Cover Issue

Hi @greatplainsclaims

If you need to put navigation and header inside the image, you can use our Gutenverse section block.
Gutenverse section has option to add background image, and you still can add more blocks into it just like cover block.

If you are confused on how to use the Gutenverse section, could you copy your cover block here? I will try to replicate the layout using the gutenverse section.
Here is how you copy a block :

@yogajegstudio When I use the Gutenverse section block, add a background image, and then add the blocks of the heading and the navigation menu and try to publish it, there is always either a white outline around the entire section, it repeats the image (even with adding the no repeat image option), or cuts the image and menu off. I am not sure if some kind of margins, etc. are off, however every time I checked the margins, padding, etc., there are none to be shown to be causing the issue.

I also tried to attach a screenshot to this thread of the variations of what I am seeing, and couldn’t. I also couldn’t get the blocks to be pasted onto here. (I obviously deleted the new sections I created and returned them to how they originally were for the time being so the website doesn’t look odd in the meantime until I can figure this out).

Any insight will help! Thank you in advance!

Hi @greatplainsclaims

You can attach a screenshot by using image block like the image below.

Put your screenshot on image sharing service or upload it to your server and insert the URL.

For the block content, you can use pastebin and put the link here.

To make us able to replicate your issue and doesn’t make the site look odd. Can you create a new page that replicate your front page plus the issue when using Gutenverse section?

@yogajegstudio @pradnyajegstudio I created a new page at the following link for you to observe: https://www.greatplainsclaims.com/?page_id=464

It is titled Test Page With Header in case you need to find it that way. I made a mock header/cover of the home page using the method of inserting a Gutenverse section block, adding a background image to it, and adding a block for the heading, the menu, and a spacer to make the full image show beneath the menu. There is a large white boarder around the entire mock front page header on my test page for you to examine.

Thanks in advance for your help!

Hi @greatplainsclaims

I’m sorry but I still don’t get it what you meant by white border around it.
Is it about the image not fully cover the whole left and right side?
If that’s it, try to set the background size into Cover

If that’s not it, could you explain further?

Thank you.

@yogajegstudio Yes, that is what I am talking about. It doesn’t cover the whole left and right side as you mentioned. It also cuts off the menu and the heading is out of place. (Refer to images below)

I tried changing it to cover as well, and it didn’t help the issue. Any more suggestions? I would like the cover/header with the heading and menu to appear the same length and width as the cover/header that says “Test Page With Header” and other content does. Basically, I would like it to look like the published home landing page we have now, but also automatically resize for mobile view. The mobile view of the cover/header is the issue I am trying to fix here by following your steps.

To be clear, I used the following steps per your suggestion to get this result:

1. Add a Gutenverse section
2. Change the background to an image.
3. Change the settings of that to “Center Center”, “No Repeat”, and “Cover”, and make sure there aren’t margins and padding creating the issue
4. The Gutenverse section prompts that you add “columns”, which I select the single column
5. Add a Gutenverse “Heading” to that column
6. Select the “GET THE TRUTH” heading created in the last step, and then click on “Insert After”
7. Add a Gutenverse “Navigation Menu”, and change the text color and font on that.
8. Click on “Insert After” on that navigation menu, and then add a spacer to make more of the background image show.

I hope that clarifies what I am looking to fix and the steps I’ve taken per your suggestions to try to fix it. Please let me know if you find another possible solution for the issue.

For viewing reference, the first image below is a screenshot of how it looks when I follow your steps using the Test Page. The second image is a screenshot of how our site looks now, which is the goal, but with the function of the “header/cover” appearing correctly on the mobile view. The third image is how our home page currently is viewing on the mobile view.

Hi @greatplainsclaims

Please try to create a new page through the editor. Then put the section there.

After create a template, then you need to change the template options on the page.

You are using the default template. You can also see this template in the site editor with the name Page. You will see the post content block. That block will render your content that you put on the page.

If you want still put the content on the page, you need to disable post content block inherit layout. Then section on the page, set the content width option to full width.

We haven’t heard you for a while. Do you still need an assistance?

@pradnyajegstudio I believe the last suggestion you gave me worked. Thank you so much for your help!