Can't set a section to full width

Support
#1

I’ve found a few threads that say to go to the content builder, Settings then General > Page Template, then choose the ‘Blank - No Container | Header, Footer’ template, but I don’t have that option. Please help.

#2

Hi @rhinotago,

Thanks for writing in.

First, in order to make your page full width your layout settings should be in fullwidth. Settings can be found in your X > Theme Options > Layout and Design .

And in regards to your page template, you can set it in your page settings when opening a new page. As shown in the image below.

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hi Nico, I have it set to full width under layout and design but I don’t have any of those templates in the drop down options, which is the reason I’m requesting help.

#4

Hi there,

Please kindly turn off the additional security step as we can not access your website to the follow up of the Full-Width case:

I checked the front end of your website and I suggest that you follow the troubleshooting steps below:

  1. Make sure that Pro is installed correctly and you Converted the theme as per this article.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#5

I’ve turned off the additional security step so you can now log in and have a look. Thanks for your help.

#6

Hi @rhinotago,

  1. For your page template:

I could see that there is page template in your page settings.

  1. In regards to conversion from X to Pro, I could see that it is not installed properly because your parent theme is X while your child theme is PRO. Install pro theme as your parent theme.

You could check the link below on how to setup or convert your setup from X to Pro.

  1. I could see that there is a container in your homepage.

You remove it by adding this code in your custom CSS:

.page-id-545 .x-container{
display:none;
}

Let us know how it goes.

Thanks.

#7

Thanks very much. I’ve installed Pro correctly now and set the page templates to ‘Blank – No Container | Header, No Footer’.

When I put that code into the custom CSS it removes the space from below the full screen slider, but it also removes the information (logo and nav menu items) from the nav bar. Can you please suggest a fix for this?

And one more thing, how can I format the top image in the Contact page to give it more height (and change that height for mobile)?

Thanks again for your help!

#9

Hi There,

Thanks for the update!

I can see there is some javascript in the global CSS panel, Please remove it and add it in global JS without the script tag.
This might be an issue that the page is not loading properly.

You can also remove the CSS given by @nico, let us know how this goes.

Thanks

#10

I’ve shifted the javascript from global CSS to global JS but it hasn’t made a difference…

And as mentioned above, can you also let me know how I can format the top image in the Contact page to give it more height (and change that height for mobile)?

#11

Hi There,

What is your login page? I cannot access it through /wp-admin nor wp-login.php please provide us correct and complete credentials so we can take a closer look what is causing the issue.

Instead of using a huge padding to give height to your Section, please use the Classic Gap Element, 2 instances of Classic Gap Element one for desktop view with the necessary height and one for mobile view.

Classic Gap Element has the Hide Base on Screen Width feature, so you can switch gaps between screen-sizes.

Cheers!

#12

I’ll provide my login details again in a secure note.

Can you please elaborate about how the gap element can be used to increase the size of the top image?

#13

Hi,

You can simply drag it to your section and adjust the gap size.

See Video - https://www.screencast.com/t/vZi6tZgWDx

#14

Thanks, but can you tell me how to adjust the height depending on device? And currently when viewed on mobile it zooms in on the image but I would like to be able to see the full width of it.

The gap below the home page slider still hasn’t been addressed so I’ve recreated the page, which has fixed the issue.

#15

Hi There,

If that is the case then do not apply your image as a section’s background, because background-images behaves that way. Add it as an Image Element instead (see the test page I’ve created)

If you’re wondering how I make the image take the full width of the Section, please inspect the ROW and turn OFF the Inner Container option.


if you’re wondering why the upper part of your first section is always behind the header, that is because of this custom CSS.

body .masthead {
    position: absolute;
    width: 100%;
}

I assume that is only intended for the homepage? If so, please update the code to this:

body.home .masthead {
    position: absolute;
    width: 100%;
}

Hope this helps,
Cheers!

#16

Perfect, thanks very much for your help.

#17

You’re welcome! :slight_smile:

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.