Just updated to latest Salient version. Not sure what might have happened (or if there is some custom code needed) for the full width row to work correctly.
http://urbanfarmcolorado.com/urban-farm-pricing/ If you scroll down the pricing page, there is a section with green image background where you can see, it isn't spanning the full width of the window. At the 1000px breakpoint all falls into place and looks nice.
We have another full width section on the story page as well. http://urbanfarmcolorado.com/our-story/ Seems when the window is narrow in width the centering of the column content is shifter to right right, creating a white space on the left of the screen. (That is if you load the window at about 1200px. it doesn't seem to do that if a break point has been reached on window resize.. then it centers content correctly.)
Thanks for taking a look, any help is appreciated.
I tried your suggestions. Also disabled page transitions completely, we don't really need them. Alas, the problem still persists.
I do notice that upon first load of the page, for a split second, the section aligns properly... then snaps to it's offset position an instant later. That does seem to indicate that some additional function is effecting the section, after it's initial styles are loaded.
Was that the though with the page transitions as well? how could those be changing the layout or css? Thank you again!
Hello, I was able to find at least a temporary solution.
As mentioned before, a margin-left: 6px was being applied to the full width section for an unexplained reason. It was an automatically added inline style on the element that was not found in the stylesheet for the theme.
I simply overrode the margin left, returning it to it's normal value of -50% by adding this line to my child theme's style sheet.
This time, however I don't see any errors in the console like you mentioned before. And all page transitions have been disabled. It seems the sections are again shifted to the right, creating white space on the left, and moving the text off the right side of the window.
Could you try testing 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.
Hey Tahir, After disabling all plugins except Salient Visual Composer, the problem persists.
I also had some CSS effecting the row with class name .our-work that was added to the full width section. I've removed that... and still an inline style of margin-left: 6px seems to be causing the shift.
Still not sure where that value is being automatically added, or how to work around it. Is there anything else we can try? thank you for taking another look.
Hey Again, If you have Page Transitions Turned On Please Switch the Animated Transition Method to "Standard" in Salient Theme Options -> Page Transition Section.
Also be sure to check/uncheck this Disable Fade Out On Click option : http://prntscr.com/8f3bj7
Moreover allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url. Thanks
I've tried a few more things to isolate the issue. When I active the Salient parent them, the full width section displays correctly.
So, I suspect it has something to do with my custom CSS or JS in functions.php. I reactivate the child theme, and remove ALL styles and additional functions I customized.
Still, the misaligned full width section occurs with the child theme enabled, and no styles or functions in effect. Is there something else I can check in the child theme other than styles.css and functions.php that would be causing this?
Hello,
Just updated to latest Salient version.
Not sure what might have happened (or if there is some custom code needed) for the full width row to work correctly.
http://urbanfarmcolorado.com/urban-farm-pricing/
If you scroll down the pricing page, there is a section with green image background where you can see, it isn't spanning the full width of the window. At the 1000px breakpoint all falls into place and looks nice.
We have another full width section on the story page as well. http://urbanfarmcolorado.com/our-story/ Seems when the window is narrow in width the centering of the column content is shifter to right right, creating a white space on the left of the screen. (That is if you load the window at about 1200px. it doesn't seem to do that if a break point has been reached on window resize.. then it centers content correctly.)
Thanks for taking a look, any help is appreciated.
Hey Chris,
Sorry for the Weekend Delay. This JS error seems to be causing the Issue :
ThemeNectar Support Team
Hey Tahir,
Thanks for the reply, however I replaced $ with jQuery and the problem still persists.
I found that removing the left margin form the containing element does seem to fix it.
http://imgur.com/a/xzD3H
Problem is that style is automatically generated, can't find it in any CSS file already.
Is there anything else I can try? Thank you very much for looking into this.
Hey Again,
If you have Page Transitions Turned On Please Switch the Animated Transition Method to "Standard" in Salient Theme Options -> Page Transition Section.
Also be sure to check/uncheck this Disable Fade Out On Click option : http://prntscr.com/8f3bj7
Thanks
ThemeNectar Support Team
Hey again,
I tried your suggestions. Also disabled page transitions completely, we don't really need them.
Alas, the problem still persists.
I do notice that upon first load of the page, for a split second, the section aligns properly... then snaps to it's offset position an instant later. That does seem to indicate that some additional function is effecting the section, after it's initial styles are loaded.
Was that the though with the page transitions as well? how could those be changing the layout or css?
Thank you again!
Hello, I was able to find at least a temporary solution.
As mentioned before, a margin-left: 6px was being applied to the full width section for an unexplained reason. It was an automatically added inline style on the element that was not found in the stylesheet for the theme.
I simply overrode the margin left, returning it to it's normal value of -50% by adding this line to my child theme's style sheet.
.full-width-section { margin-left: -50% !important; }
I think it works okay, although still not sure why it happened or where the -6px left margin came from.
Hello again.. this problem has returned (or was never actually fixed in the first place.)
We see it in full width sections on these two pages.
http://urbanfarmcolorado.com/urban-farm-pricing/ -- Green section "Included In Each Garden Installation:"
http://urbanfarmcolorado.com/our-story/ -- "Feed Your Inner Farmer" & "Our Customers Love Us" sections.
This time, however I don't see any errors in the console like you mentioned before. And all page transitions have been disabled.
It seems the sections are again shifted to the right, creating white space on the left, and moving the text off the right side of the window.
Screenshots:
http://imgur.com/a/XqTRe
I'm totally baffled why this is happening, hope you can figure it out : ) Thank you for your expertise.
Hey Again,
The Thrive Visual Editor is likely at fault :
ThemeNectar Support Team
Hey Tahir,
After disabling all plugins except Salient Visual Composer, the problem persists.
I also had some CSS effecting the row with class name .our-work that was added to the full width section.
I've removed that... and still an inline style of margin-left: 6px seems to be causing the shift.
Still not sure where that value is being automatically added, or how to work around it. Is there anything else we can try?
thank you for taking another look.
Hey Again,
If you have Page Transitions Turned On Please Switch the Animated Transition Method to "Standard" in Salient Theme Options -> Page Transition Section.
Also be sure to check/uncheck this Disable Fade Out On Click option : http://prntscr.com/8f3bj7
Moreover allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Thanks
ThemeNectar Support Team
Hi again,
I've tried a few more things to isolate the issue.
When I active the Salient parent them, the full width section displays correctly.
So, I suspect it has something to do with my custom CSS or JS in functions.php.
I reactivate the child theme, and remove ALL styles and additional functions I customized.
Still, the misaligned full width section occurs with the child theme enabled, and no styles or functions in effect.
Is there something else I can check in the child theme other than styles.css and functions.php that would be causing this?
Many thanks!
Hello : ) SOLVED!!
Finally figured it out. I started removing all other file that were in the child theme directory.
It was my modified header.php file that was the culprit. After it was removed we're back to normal.
Sorry for the run-around... probably something I screwed up. Thanks for the attention to this. Cheers!