Happy to get some feedback. I thought for my first that I would try a project to get my feet wet. Many of the images (logo, screenshots, modal pictures) will be updated with proper resolution screenshots ones once the client sends them to me. Same goes with some of the placeholder text to be filled but curious on your thoughts.
Don’t be gentle! Happy to hear what could use changing.
@jabostick If it is OK with you, I will move this over to the Site Showcase area of the forum.
I like it very much @jabostick
The only thing I would change in this case is the color of the menu background items to match the logo colours.
Best
I am sure I am missing something obvious but, I’m having an issue where the page is scrolling left and right slightly on ipad mode. I imagine I have some odd margin set but I can’t seem to find it. Any thoughts where I went wrong?
I have a short screen recording of what I mean.
I don’t see this behaviour in Safari at the various sizes I tried it. I see you are using some kind of iPad Air 2 screen simulator and I wonder if that is causing the issue?
Thanks Gary. I’m just using the Firefox developer tools (responsive mode). I see it in RW Preview too, when I look at iPad landscape. I just checked on safari and their responsive design mode. I can get see the behaviour if I look at the iPad view (9.7" landscape, for example).
Can you double check that setup, just so I know I’m not going crazy…
Just double checked it in Safari Dev responsive mode iPad 9.7" landscape and it is perfect.
It’s weird that you can see the bottom scroll bar flash up in your video as if the screen is being resized.
Try removing all animation and sliders as a test.
Weird. Thanks for checking. I have to get cracking on some housework/parenting but I’ll try a reboot and then check sliders/animation this evening.
I do not see it on an iPad Air 2 (iOS 10.3.2), however I do see the issue in Safari (10.1.2) on OS X (10.11.6).
I opened your site in a new window with it sized to within the iPad break. When the page loads, it does not scroll left/right. However, once I scrolled down the page, I could get the horizontal scroll bar to appear.
Are you using the Grid stack for the layout? I think it has something to do with how that’s coded. If you look at the outer grid containing element, it has -15px margin and 15px padding. I think some versions of Safari don’t like the negative margin.
Btw, are you disabling right-click on the site? It makes it harder to inspect an element to see what’s going on. You may want to disable for testing/troubleshooting.
Post up a download link to a ZIP file containing your project file and I will take a quick look at it before bed. That being said, I will be away from the computer for a week so tonight is the last chance I’ll have to look at it though.
Also, I agree with the above. Disabling right-click really doesn’t do much of anything for you.
Thank you both.
@DLH is this right-click a Foundry setting? I did not disable it on purpose (and don’t see it in the Control Center) but I’ll dig through my setup… Same with the negative padding/margin. It might be a layover from the original project file (which had a negative margin with the Overlap stack)? I’ll have a closer look around the grid stack and where the overlap stack was.
@elixirgraphics I’ll send you a download link via PM, Adam. Thanks for having a look. It isn’t critical or anything, but if you have a spare moment, that’d be great
@jabostick: I don’t think there is a Foundry setting for disabling right-click, and I don’t know what you did to disable it. I just noticed it when trying to inspect the grid area and found I could not right-click.
@elixirgraphics: I have also seen this horizontal scrollbar issue in one of my projects where I used the Grid stack.
I took a look at it real quick just now. The problem area is a Container stack where you’re assigning it padding using the built-in default Stacks controls for Padding. I don’t have time to take an in-depth look at it right now. But you should remove the padding you’re adding, here:
I suspect it has something to do with the way the Bootstrap rows work. But I don’t have the opportunity to dive into it deeper. The best thing to do really though is to use the Margins stack within the Container stack and setup responsive based padding / margins so each breakpoint gets its own spacing.
Foundry does not have that “feature” included in it anywhere.
Not the Grid stack in this case. If you’re having troubles, submit your project file to me and point out the problem area and I can look at it when I am back from my time off.
Strange, that padding adjustment doesn’t seem to do it (though your point is noted)…
The Chef project is working fine and many of the settings are duplicates of that. I’m not entirely sure when the issue crept in so I might start fresh and add a section at a time. I think the only major changes yesterday were adding a few new images in the ‘online booking’ section/slider but they should all be the same dimensions as the previous ones.
@jabostick After Adam’s reply, I went back to the project where I saw a similar issue. It took a bit of time deleting stacks until the problem went away. I was finally able to track it down to an interaction with the Grid stack and the Reveal stack.
It looks like you’re also using the Reveal inside of the Grid, so that may be what’s going on. Try moving the Grid contents out of the Reveal stacks and then delete the Reveal stacks from the page. That should leave you with the Grid and the current cell contents, but without the Reveal animations. It shouldn’t take you too long to strip them off the page. (Work on a copy of your project, just in case you accidentally save after deleting.) In my case, the issue went away when the Reveal stacks were removed. As soon as I put a Reveal back in a Grid cell, the horizontal scrolling came back.
Obviously, that isn’t going to work for your final solution, but it may allow you to confirm if you are seeing the same issue.
Awesome! Thanks for having a look. I’ll give it a go this evening after work. I believe the Grid is something I added to egomade’s project, so it would make sense that I see it on mine and not his.
Looks like the right click disable is set in slick slider:
indent preformatted text by 4 spaces
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;Oh, wow good sleuthing! So that’d be coming from a gallery that I have inside the modals, I think.
Yeah, some galleries do this as a “feature” to make a marketing claim to stop images being downloaded.