So one of the Sparkle website users listed at sparkleapp.com’s landing page (“Made with Sparkle”) is wubsites.com. I went to it and noticed that some of their designs extend way past the right and left side of Sparkle’s normal grid area (960px for laptops). Anyone have any ideas as to how they pulled that off using Sparkle? @Nathan?
Hi Scott,
They were made by using a border on one side of the item.
Nearly all of the website is contained within the set page width, except for a few areas which are…
- the page hero widebox set at 100% width with gradient
- the next divider is the same
- the white background to the Warka image I would say is a white box with a left hand border of 999px
- the next divider again a widebox set at 100% width with gradient colour
- and the footer is also a widebox set to 100% width
And of course the hamburger navigation slide in from the right is a popup.
Here is also another good example of a website I created for a client using Sparkle where I have layout design flowing beyond the set page width - https://www.pcbeng.com.au
@Nathan - Thanks for that reply! What about the website icon links in the " Some of our latest works" section? I’m new to Sparkle, so I’m still learning. How are you able to make them interactive outside of the grid area?
@FlaminFig - Thanks for those insights, especially the box border info! Your client website is nice. I notice that you are able to use more of the left and right sides for a wider menu, etc., than I know how to achieve.
1 Like
Hi @Scot, can you attach a screenshot?
For that white box, as you can see in code, Nathan just added a border.
I don’t know if it was via the Sparkle interface or via code, but you can definitely add a border using Sparkle’s interface, as below:
Then you can see it off canvas as this:
Although by adding it via Sparkle’s interface, it will not be responsible, so whenever theres a different screen resolution, the border won’t fill til the edge, and that’s why I believe Nathan made it via code using border-left: 100vw or something similar
1 Like
My take is that Nathan used sparkle’s settings to create that effect with a left margin of 999px.
Even on my 27" iMac the left border touches the edge of the browser set to 100% full screen.
And it is also so across a number of device resolutions! 
As @primo and @FlaminFig mentioned, it was made by using a 999px border on the left side. You can see the screenshot of the Sparkle style settings.
2 Likes
Interestingly, as I work on my first website using Sparkle using one of their templates, I started with the regular desktop layout and am now beginning to adjust that layout for other devices. Just now I temporarily switched the wide desktop pc and ultra-wide desktop pc layouts from automatically scaled to custom layout, then back to automatically scaled. Now when I switch back to the to the regular desktop layout, the grid space is wider than before! Has anyone else experienced this? It seems to explain why others were achieving wider designs than I was on my website design up till now, since apparently I was initially working with a narrower grid space than they were.
Thoughts anyone?
Just going over the basics @Scott…
Each device has a set width, but you can manually alter the Desktop and the Ultra Wide Desktop by clicking into their relative pixel field.
The grid spacing you mention can also be set manually (on the right of your device icon) for the device but has nothing to do with making the set width of the device any wider. So I think I’m not totally getting you on that one?
So in the end to have your website in the browser look wider then you have to introduce the Desktop and the Ultra Wide Desktop either scaled or custom(ed). If you have them scaled you are not able to view them on the Sparkle canvas. If you have them custom(ed) then you can interact with them (layout, text, etc…) on the canvas.
@FlaminFig Thanks for those clarifications. I’m glad that I finally know this, though it was there in front of me the whole time.
1 Like