Hey there,
I could use some help with our site in development. The site was pretty much done and ready. Everything was working fine this morning.However I was tinkering with the header a bit and now the website just ‘breaks’ from a certain point when scaling to the lower viewport.
I tried deleting all the ‘new’ elements but the site remains broken. I’m not sure what’s causing this and I hope a fresh pair of eyes can locate the problem. I’d hate to redo the whole thing…
Greetings,
Mark
Hi @Zorgfix,
Thanks for reaching out.
It appears okay within the builder preview so I went ahead and checked it in https://validator.w3.org/ and confirmed that there are broken HTML codes. It works within the preview since each element preview is isolated to one another. Please check these related threads https://theme.co/apex/forum/t/very-strange-error-in-pro/52579/8, https://theme.co/apex/forum/t/glitch-in-cornerstone-column-width/54003/2
Though, I can’t find which content is broken either.
Though the layout should really break into single columns on the lower screen, in your case it’s not just full-width column. Perhaps what you mean is it should stay on 2 columns?
Thanks!
The website followed the basic break-down rules (as in, I never changed any of the theme code) the theme itself always did a fine job breaking down the website at lower viewports. As I said, in the morning it worked fine, in the afternoon it didn’t.
The errors from the validator don’t seem very site-breaking.
Would reinstalling the theme be an option? I feel like I somehow made an error somewhere but I can’t pinpoint it.
When the website breaks at the lower viewport it does seem to lose all css-rules. Can a css error be the cause?
Hi @Zorgfix,
You’re right, it happens because the column’s flex-grow is zero (stylesheet) and should be overriden by builder’s CSS option like this
.e6eeb5446-8b02-4d90-ad1d-9f7949320b87 > .x-row-inner > * {
flex-grow: 1;
margin: calc(1rem / 2) calc(1rem / 2);
}
But no CSS is generated similar to that per column/element. But if I view it within browser’s view sources, they are there.
Could you try re-creating it again? And try not using a global block, I’m not saying it’s the culprit but seems the CSS works on non-global block content. In the meantime, you can also add this temporary fix to Theme Options > CSS
.x-row-inner > * {
flex-grow: 1 !important;
}
Thanks!
I added the temporary fix but it doesn’t seem to do much. I tried disabling the elements with global block but this didn’t help either.
What do I have to rebuild exactly?
I have been deleting different elements, widgets & plug-in short codes to see if anything is breaking the scaling. But nothing seems to be working.
Hello ZFSupport,
Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.
Pro 3.1.2 is now available in automatic updates! This release contains fixes for several issues, like you have mentioned above, so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version.
After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.
@Rad asked you to recreate the header entirely. There might be corruption of the css from the globals or the global block. It is best that you recreate the header without the global block.
Kindly let us know how it goes.
I apologize for bumping it was never my intention (I was merely adding information about solutions I tried).
The update didn’t fix the problem for me but rebuilding the header from scratch did. No idea where it went wrong with the original but it probably had something to do with the search element breaking (I left that out for now).
Thank you for your research and patience. We can go launch the website now 
You are most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.