How to contrain the margins on a single page?

I have custom html on a page and need the center content to be at exactly 1217 px. I tried using the “No container, Header, Footer” but it messes up the divs.

I was using this page as a reference: https://www.indiegogo.com/projects/aria-waterproof-earbuds-bluetooth-5-32h-battery-iphone-headphones#/

As you can see here, the content is not as big as the reference page and the images got smaller: https://image.ibb.co/mQPxxd/img_2018_05_30_22_02_21.png

Thanks in advance!

Hi There,

Thank you for writing in, I think using the “No Container | Header, Footer” page template is the right path on achieving this. Please clarify what is the issue with “No Container | Header, Footer” template.

Navigate to Theme Options > Layout and Design and set the Site Max Width to 1217

Let us know how it goes,
Cheers!

I’ve tried doing the “Blank-No Container | Header, Footer” option, but it messes with the divs in the custom HTML on that particular page:

Also, I don’t want to make the entire site Site Max Width to 1217, just this one page.

Hi there,

You may add a class value to the body class option of the page then add this code to the global CSS:

.the-class entry-content {
    max-width: 1217px;
    margin: 0 auto;
}

The code above assumes that the class value you have added to the page is the-class.

OK, I added “igg” to the Body CSS on the page:

I’m using this page template:

But the content area hasn’t changed, it’s still too small:

And if I remove the “Container” from the page template, the layout breaks again.

So yeah… that didn’t work.

Hi There,

Please provide us the direct URL of that particular page so we can take a closer look.

Thanks,

Eek, it is on a local dev server… let me try and figure that out.

Hi @quantazelle

It will be helpful if you move your website to a live server so that we can check the case in real time to be able to help you. At the moment we do not have a sense of the problem and don’t know the details to be able to help.

Thank you for your understanding.

Hi,

Sorry but that link will not work. You will need to upload your site to a server so we can access it and be able to check.

Thanks

http://emergencyadapters.io/indiegogo/

Hey @quantazelle,

You must use the Blank No Container | Header Footer template as @friech suggested earlier. What it does is it gives you all the space between the header and the footer unlike the Blank Container template. That means, you have control over the area so what you should do is to add CSS to your custom HTML.

I see you’re using a third party page builder. You must use that builder to contain your content.

You can also follow @Jade’s suggestion as an alternative. I see you added igg as body class. You did not add the CSS that’s why it does not work. The CSS will also work only in Blank No Container as it uses max-width.

.igg .entry-content {
    max-width: 1217px;
    margin: 0 auto;
}

In summary, the Blank No Container does not break your content. It is your content that is spanning full width of its container and in this case, the container is entry-content.

Hope that helps.

I did add the css class to the Pro>Theme Options>CSS, which is showing up on the localhost site:

However, I can’t get that page to load on the production site. I get the spinning square wheel of fail:

Ah, wait, I see… I missed the period in front of entry-class. I changed it to:

/*START Page Width Indiegogo*/
.igg .entry-content {
max-width: 1217px;
margin: 0 auto;
}
/*END Page Width Indiegogo*/

But now that leaves us with the Wheel of Fail problem on the production server…

Hey @quantazelle,

There are several factors that could cause the spinning wheel issue. Please check for the following:

Hey there,

Please check for the following first:

  1. Ensure you’re using the latest version of Pro.

  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing 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.

  5. Remove custom CSS, Javascript and templates.

  6. Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.

  7. Contact your host to increase your allocated memory or do it yourself by adding this code in your wp-config.php

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

If the list items above does not help, please open a separate thread and give us FTP access also. Post a link to this thread for reference. This is to avoid confusion due to mix of topics and / or long thread.

Thanks.

OK, I got it working by upgrading. Thanks!

Hi @quantazelle,

Let us know how it goes.

Thanks.

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