Weird Margin at Specific Page

[fabiofava]

Hey folks, I’m having this issue of weird margins on my custom profile page. Due to some plugin conflict the preview area doesn’t work, so another window is needed with the frontend to be able to refresh and see the changes. Would someone help me fixing that margins?

[prakash_s]

Hello @fabiofava,

Thanks for writing to us.

I checked your given page URL it seems that you have set the padding-top for the section, I would suggest you please decrease the padding-top and padding-bottom to get rid of the extra space.

For the builder preview, it seems that it might be the issue of plugin conflict or cache issue, I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

1. Testing For Theme Related Issue
2. Testing For Plugin Conflict
3. Theme Update
4. Child Theme
5. Css/Js Customization
6. Increasing Php Memory Limit
7. Disabling Cache
8. Disabling Cdn
9. Permalinks
10. Version Compatibility

If none of those work, It would be best if you could copy your live website to your staging area. and send your details in a secure note so that we can investigate your setting without breaking your live site. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[fabiofava]

Thank you @prakash_s

I’ve removed padding from all sections, cleared all caches, but it seems that the error is some CSS (not sure if at page or section level), but as I’m not that good on CSS, I kindly ask you if it could be possible to take a look on those, please.

The frontend issue isn’t that important at this time, first lets fix the sections, then if you say you’re available for a deeper look, then I’ll copy to a staging area so you can dig deeply.

I’ll keep looking forward, thank you very much and best regards.

[tristup]

Hi @fabiofava,

Before you create the staging server, please make sure that you have troubleshot all the listed points given by my colleague in his post. If that does not help, please create the staging server and share the credential for further investigations.

Thanks

[fabiofava]

Thansk @tristup but that were to fix a visual glitch with the Preview area, wich isn’t very important as it happens only on a few pages without real webdesign.

The real issue here are the weird margins at that page. I’ve fixed the Padding as requested, but the issue persists. Please let me know if you can help me. The visual glitch isn’t a problem.

[ruenel]

Hello @fabiofava,

What should be the expected result that you want to see? At the moment, you have added narrow-700 custom class selector in your Row element which made the row width up to 700 pixels wide only. Can you please send us some screenshots detailing which margins you want to remove or adjust so that we will have a clear idea of what might be happening on the page?

Thank you in advance.

[fabiofava]

Hello @ruenel

The page should show exactly as all other pages of the site. All pages use narrow-700 and anoter narrow and they show perfectly.

Only the Profile (/membership/) page shows erratic behaviour. I’m not sure what I did wrong on this page, it used to work at some point, but after some update on the Pro Theme it started showing that weird margins around Hero Sections and everything else.

I suppose is some Page CSS that’s breaking the design (since it comes to the whole page), but I wasn’t able to find what (I’m not a good coder). And the blue (WooCommerce Shortcode) section shows the Bottom Separator out of the section, quite weird.

I hope you ThemeCo wizards can help me fixing that. I thank you all very much for your help and support to find where the error is.

Thank you very much and best regards!

[ruenel]

Hello @fabiofava,

In your Section Theme My Login section element, you have added this code:

$el svg {
  fill:#ffffff;
  width:100vw!important;
  margin-bottom:-8px;
}

$el {
  display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
  height:auto!important;
  padding:70px 0 9% 0!important;
}

@media screen and (min-width: 2560px) {
  $el {
    height:1000px!important;
  }
}

@media screen and (min-width: 2560px) {
  $el {
    height:1000px!important;
  }
  $el h1 {
    font-size: 5em!important;
  }
  $el h2 {
    font-size: 2.5em!important;
  }
  $el .head-txt {
    font-size: 2em!important;
  }
}

@media screen and (min-width: 1700px) {
  $el {
    height:730px!important;
  }
}

@media (max-width: 481px) {
    $el {
    height:auto!important;
  }
  $el h1 {
    font-size: 3em!important;
  }
    $el .x-bg-layer-lower-image {
    background-position:right center!important;
  }
  $el .x-bg-layer-upper-color {
    background-color:rgba(0, 0, 0, .5)!important;
  }
}

Please remove the the Element CSS in your section and test your page again.

Kindly let us know how it goes.

[fabiofava]

Thanks @ruenel

Many elements have CSS, I’m not sure what one could be causing that. That Section has no CSS, but the Line “Linha Shortcode ThemeMyLogin” has these:

$el {
max-width:800px!important;
}

I cannot find those CSS you’ve pasted. Maybe the problem is on the first ($el svg) or the second ($el) CSS sections? I see “padding” there and I’m not that good with “flex” settings.

Would you please try helping me fixing that? If I just remove it all, then the @media screen may be broken…

I still think the issue is on the PAGE CSS not on any element. This because the whole page shows the error, despite the separator being wrong at the WooCommerce Section…

[tristup]

Hi @fabiofava,

You can find the CSS in the Section Theme My Login section Customize > Element CSS as shown in the given screenshot.

Hope it helps.
Thanks

[fabiofava]

Thank yo @tristup I’ve found it. But what part of that CSS is causing issues? I’ve tried removing it all but the issue continues there. That’s why I say that this is probably being caused by the Page’s CSS not on a specific section or element…

The problem comes since the Hero Section (I mean the hole page body), that’s why I assume it’s something at the Page CSS, that you can find clicking on the CSS icon on the bottom-left of the window, marked with an elipse on the image below.

The designer I’ve hired have made many CSS inputs on this page to make it to show properly, but now it’s messing-up in some place I can’t find. I assume Page CSS since the whole page have the error, not only a specific section.

[fabiofava]

Hey there,

I’ve set the Support User account to my webdesigner so he can take a look. I get back as he gives me some infos and maybe he can fix that.

Thanks again please don’t close yet this topic as it’s not yet solved. Cheers!

[marc_a]

Hey @fabiofava,

Great and let us know how it goes!

You can also advise your web designer to save the page as a template and then try to delete the section one by one to find the culprit.

Hope that helps.

[fabiofava]

Hey there. That was solved, thank you for your time and effort. You can close the topic, thanks!

[ruenel]

You are most welcome, @fabiofava.