Responsive problems with Foundation/Screens

Dear RapidWeaver community,
I created a website with foundation theme & stacks + the Screen stacks.
I will upload pictures how it should look (this is how it looks in the preview mode but not in the browser).
Then compare it with how it looks in a browser: www.inaandsarah.worx-easy.de
Don’t wonder about the content of the website, I got the assignment of their parents.

Do anybody know what could be the problem?

For the image warping, you could check the settings on your Screen Page in the “Screens Page - Background”, play with the “Image Size” setting. I’m thinking you should use ‘Cover Image’ but play around with the options.

For the scroll arrows that seem to move around, I’m wondering if checking “Center Content” in the main Screens settings would fix it.

Screens demo not working in Chrome or Firefox.

I don’t have the demo version. I already paid for it

No, the actual JW live product page demo is not working.

The JW demo site just needs a re-publish which I am sure will happen today.

I’ve just published a fresh version from the demo file and it works fine in chrome
http://sandbox.bigwhiteduck.com/screens/

@worxeasy Firstly regarding the background images, @jabostick is correct, they should be set to Cover in the background image settings. This will ensure that the will fit the available space without distorting. You currently have them set to Fill which will scale the image directly to the size of the browser and so a landscape image will be heavily distorted on a portrait device.

Regarding the navigator arrows: you currently have the position set to be vertically positioned in the center of the browser (42,75% from the bottom) which is fine. You have the left/right align set to an absolute value (set with rem units), change this to a percentage as well and they will remain horizontally centered as well.

You then just need to adjust the ButtonPlus settings accordingly - select Center align for that as well (screens is vertically aligning it so that is fine) . The remaining problem is the custom sizing options that you have selected in ButtonPlus - you have set it to a 10% width (of the screen width) with a minimum width of 100px which is too small for the text you have in it - hence the text overflows .

Either just leave the width setting on auto or specify a larger minimum width. I suspect auto width would be fine though and make life a lot easier as well.

2 Likes

And does anybody know why my pictures in “BLOG” aren’t responsive?