I’ve recently picked up Stacks4Stacks Mini Cookie. It works fine with most frameworks/themes but I’m hitting an issue with UIkit: testpage | Template Repo
On the page is only the Uikit style stack and Mini Cookie, which is set to full-width bottom. As you can see it’s crashing the width of the page on the right-hand side.
I’ve tried all manner of custom CSS without any luck. The best I can come up with so far is to set the width to 98vw!important. This works on wider screens but as the screen reduces in width the container once again crashes the side.
CSS for the Mini Cookie wrapper when using UIkit…
background: rgba(255, 255, 255, 1.00);
box-shadow: 0 0 10px 3px rgb(0 0 0 / 20%);
I’d be interested to hear if anyone else experiences this, with either UIkit or any other framework, and/or if anyone can think of a way to stop it happening.
Update: I found a fit with the following custom CSS, but would still be curious to hear if anyone else has seen this, or even if anyone can work out why it’s happening.
margin-right: 40px !important;
I don’t see your custom CSS code in the page you’ve given us here. So evidently whatever you were trying offline in RapidWeaver 8 preview never made it through to the published website. And your popup container looks just fine in Firefox v94 - including at different screen widths and using the mobile simulation tools. I see no overrun, with it going off the edge of the page. No horizontal scroll bars or anything like that:
Ordinarily, zero custom CSS code is needed to make this work. It only uses simple CSS code to control the widths, positioning and fixture on the page.
Perhaps start with the basics. Do a full republish of this page (File > Mark Page As Changed). Then navigate to the page in your web browser and purge the cache. Perhaps try a couple of different web browsers and see if you can replicate this overrun of the content in one of them.
What is the purpose of the divisional container with an ID of
blur that encloses all of your page elements? Is that some sort of animation loading effect? Try disabling that to see if it has any effect on calculations or causes display / layout bugs in RapidWeaver 8 preview.
Same with the stack with a class of
uk-offcanvas-content. Just by going with its name ‘off canvas’, that sounds to me like it is for putting content outside of the normal viewport of the page - like a popup mobile menu, social sharing buttons, or lightbox? Put my stack outside of this stack and try again.
If you have not done so yet, download my sample RapidWeaver 8 project file and open that. There is a link to it on the product page. You will see some examples in there to copy and paste into your website. These already contain dummy content and buttons to practice with.
I fixed the problem. Well, adding a random third party stack to the page fixed the problem, found purely by chance.
I’m told the issue is due to the way that UIkit does its layout stuff.
All very techie and over my head, but a nice clean fix is found so all good here.
This is purely a test/demo. I purposely kept the page content to a minimum.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.