I’m new to Sparkle–had been using Freeway Pro then Muse until they more or less closed shop. Anyway, imported a portfolio site and have been updating it for Sparkle. Wasn’t aware as to how Sparkle treats responsive design and so my page witdh is only 960 pixels. My original site, created in Muse (jeffreysterndesign.com) was fluid to browser width and would adjust to different device sizes (except phone size). In any case, when I previewed the Sparkle site everything was kind of crammed into the middle 960 width. I have since gone back and let all my backgrounds, etc. go to full width but my page elements are still limited to the 960 width. I have since seen the devices menu item. If I choose wide desktop and then custom layout, I see that I can get the page size wider, but it automatically scales my design and type to a larger size causing type to wrap or be hidden, but my menu bar is still more or less stuck in the middle. Is there not a way to say move the fish in my nav bar further to the left and menu items more to the right as they are in the link I provided? Or should I have just started off with the 1200 px size and just recreated my site that way?
Sparkle’s layout engine is multiple fixed width devices, which makes layout more predictable. You do need to customize for multiple devices, but that’s generally just one plus the mobile adaptation (960 or 1200, and 320).
Yes there’s automatic scaling, but I’m not sure what you mean about the wrap/hidden issue.
Currently “content elements” (so anything that’s not full width) stays within the canvas margins that are the width of the current device.
So no fluid responsive capabilities huh. Anyway, what I’m seeing, is that even if I select the wide screen 1200px setting, the distance of some elements, primarily in my header, from the outer limits of the browser window are changed minimally. And if I click on the radio button for the widescreen PC, everything enlarges (both height and width). So for example, I have a heading text box that says “About”. After clicking the wide screen, the word ‘About’ has increased in point size and no longer fits in the box–only see Abou—unless I manually adjust. I was hoping to get the added width, but not have all the text enlarge as well.
If have have uploaded the site it may help to view a URL. If not a couple of screenshots may help.
I’ve found the more information you can give about your problem with visual aids the better the community can help you.
~Bill
I hear what you mean JF. And I can visualize your problem. Your header words are linked to other areas on the homepage, and your other buttons on page one lead to other pages. Got that. Couple of checks.
-
I’d make sure your words in the header are completely separate, and not linked to anything other than descriptions on your home page.
-
Your header, logo, and words are sticking to the top. Meaning that they’re grouped. I’d suggest this may be the problem. Perhaps that is why the nav at the top expands the words. So all those elements are grouped.
-
Try un sticking the nav words at the top and see if that helps. Do they still expand or are static? They should be static, beyond expansion.
-
Identifying all that. I’d make the words at the top a nav bar. Group and stick at top.
-Bill